|
最近领导让搞一个百度地图标注并显示其标注信息的功能，之前没有搞过地图相关的东西，今天总结一下，其实还是很简单的，不废话了，直接上代码，新手看很有用的，请仔细阅读，不要盲目求快，有些小细节刚开始还是很坑的。 首先，创建html页面，这里不讲页面，主要说一下地图相关的js。 需要的引用：在引用中输入秘钥，秘钥在开发中心获取。
然后，开始创建地图：
var map = new BMap.Map("allmap",{minZoom:4,maxZoom:15}); // 创建Map实例,并设置地图最大最小级别
map.centerAndZoom(new BMap.Point(116.405419,39.914714), 13); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP ]})); //添加地图类型控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
添加这几行代码，基本的地图就成型了。
打开地图页面直接获取已经添加的标注点：
var marker;
var point;
var searchInfoWindow = null;
//显示标注点信息
var addinfo = function (marker,searchInfoWindow){
marker.addEventListener("mouseover", function () {searchInfoWindow.open(marker);});
//mouseover 表示将鼠标放到标注点上，就可显示信息，点击后显示可用“click”
}
//删除标注点
var removeMarker = function(e,ee,marker){
map.removeOverlay(marker);
}
$(function(){
$.ajax({
type:"post",
url:"../connection/select",
async:true,
dataType:"json",
success:function(data){
alert("success")
for(var i=0;i
//1.点击动态生成标注点
point=new BMap.Point(n.point.lng,n.point.lat);
marker =new BMap.Marker(point);
map.addOverlay(marker);
//2.为标注点生成右击菜单
//创建菜单，可以抽取为方法，请自行搞定
var markerMenu =new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));
markerMenu.addItem(new BMap.MenuItem('编辑信息',IN.bind(marker)));
marker.addContextMenu(markerMenu);
});
function save(){
var INFO = $("#inpu").val();
if (INFO == null || INFO == "") {
alert("请输入信息");
return;
}
alert(INFO +"666");
$.ajax({
type:"post",
url:"../connection/save",
async:true,
dataType:"text",
data:{info: INFO,"point_x":point.lng,"point_y":point.lat},
success:function(data){
alert("success")
alert(data);
},
error:function(){
alert("fail");
}
})
}
基本的功能到此就可实现，其他更细节问题请根据单位要求自行设定。实现其他的功能实现逻辑都是一样的，首先你要明白目的是什么，勿盲目上手开始写，将逻辑理清楚，去查阅，事半功倍！
|