<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title> <script type="text/javascript">
var iscreatr=false;
function initialize() {
//---------------------------------------------基础示例---------------------------------------------
var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20}); // 创建Map实例
//map.centerAndZoom(new BMap.Point(116.4035,39.915),15); //初始化时,即可设置中心点和地图缩放级别。
map.centerAndZoom("成都",13); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动 map.addEventListener("click", function(e){
if(iscreatr==true)return;
//---------------------------------------------遮盖物---------------------------------------------
iscreatr=true;
var point = new BMap.Point(e.point.lng ,e.point.lat);//默认
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point);
var label = new BMap.Label("我是可以拖动的",{offset:new BMap.Size(20,-10)});
marker.setLabel(label)
map.addOverlay(marker);
marker.enableDragging(); //可拖拽
marker.addEventListener("dragend", function(e){
document.getElementById("r-result").innerHTML = e.point.lng + ", " + e.point.lat;//打印拖动结束坐标
});
});
} function loadScript() {
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
document.body.appendChild(script);
} window.onload = loadScript;
</script> </head>
<body>
<div id="r-result" style="float:left;width:100px;">打印坐标</div>
<div id="allmap" style="width: 800px; height: 500px"></div>
</body>
</html> <script type="text/javascript">
// 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));
// map.setZoom(14); //放到到14级
</script>

百度地图Api进阶教程-点击生成和拖动标注4.html的更多相关文章

  1. 百度地图Api进阶教程-实例高级操作8.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 百度地图Api进阶教程-基础地图示例1.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 百度地图Api进阶教程-弹出信息窗口5.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  4. 百度地图Api进阶教程-创建标注和自定义标注3.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  5. 百度地图Api进阶教程-默认控件和自定义控件2.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  6. 百度地图Api进阶教程-点聚合9.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 百度地图Api进阶教程-用户自定义数据(标记和搜索)7.html

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  9. 使用百度地图API进行Android地图应用开发(Eclipse)

    随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. ...

随机推荐

  1. 用SQL语句修复SQL Server数据库

    使用数据库的过程中,由于断电或其他原因,有可能导致数据库出现一些小错误,比如检索某些表特别慢,查询不到符合条件的数据等. 出现这些情况的原因,往往是因为数据库有些损坏,或索引不完整. 在ACCESS中 ...

  2. Jquery的画图插件-jqPlot+

    JqPlot(个人和商业都免费) http://yunpan.cn/Q7Yh5dUNPjtak  提取码 3653 下面开始制作一个柱状图: ----------------------------我 ...

  3. Titanium开发环境搭建第三个坑

    Nodejs版本的问题 首先,如下引用:http://docs.appcelerator.com/titanium/latest/#!/guide/Installing_Node To run all ...

  4. hibernate4整合spring3事务问题

    本文是作者在对hibernate4+spring3+struts2整合中遇到的一个问题.对s2sh进行了基本的整合搭建以后,就是对事务的控制管理,将hibernate的事务交由spring管理.根据网 ...

  5. 【iOS】Quartz2D简单介绍

    一.什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图 ...

  6. Incorrect string value: '\xF0\x90\x8D\x83...' for column 通用解决方案

    mysql插入非ascii字符时报这个错的根本原因在于: 对应表的字符集无法存储要插入的字符,比如汉字插入latin1编码,某些特殊字符插入gbk或者utf8等. 检查一下实际插入的字符以及对应表或者 ...

  7. JavaScript基础11——js的全局函数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 选择Web API还是WCF

    ASP.NET WCF是.NET平台服务开发的一站式框架,那么为什么还要有ASP.NET Web API呢?简单来说,ASP.NET Web API的设计和构建只考虑了一件事情,那就是HTTP,而WC ...

  9. 转:C# 使用NLog记录日志

    原文:http://www.cnblogs.com/felixnet/p/5498759.html NLog是一个记录日志组件,和log4net一样被广泛使用,它可以将日志保存到文本文件.CSV.控制 ...

  10. C语言内存对齐详解

    一.字节对齐基本概念 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定类型变量的时候经常在特定的内存地址访问,这就需要各种类型 ...