百度地图开发 Javascript API

因为google map 在大陆被墙（ 有个大陆版的，但是在大陆地区还是百度好用），很多在大陆开展业务的客户都要求用百度地图。

客户的要求大概这样，点击地图的标志物找到面板上相对应的信息，或者点击面板上的信息，对应的标志物移动到地图中间。改变图片。（我的谷歌地图开发也一样的）

首先要去百度地图开发平台申请api key 百度地图开发平台

[code]<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=“你的的百度api key”"></script>

[code]  //初始化
function initialize() {
var map = new BMap.Map("allmap");
point = new BMap.Point(114.11728, 22.545459);
map.centerAndZoom(point, 12);

//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);

//平移缩放控件
var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT};
map.addControl(new BMap.NavigationControl(opts));

//所有覆盖标签
//抛出闭包的用处,方便后面通过面板操作覆盖物
var allTags =  renderOverlay(map);

// 公共定位器
var geolocation = new BMap.Geolocation();

//是否启用附近功能
window.nearby = true;

//left navigation 显示隐藏标题 移动位置
window.activeIdentify = "";
$("#-list").on("click","li",function (e) {

window.activeIdentify  = idenify;
allTags[idenify].showTite();
allTags[idenify].moveToCenter();
});

// 附近搜索  related with  moveend zoomend
$("#map-panel-nearby-content button").on("click",function () {
searchNearby(allTags,map,geolocation);
});

map.addEventListener("zoomend",function () {
mapZoomend(allTags,map);
});

map.addEventListener("touchmove",function (){
$(".evisu-map-wrapper").removeClass(" active");
});

map.addEventListener("moveend",function () {
mapMove(allTags,map);
});

// 初始化定位
getCurrents(map,geolocation);

// 移动 active tag 到中心
$(".panel-ctrl").on("click",function () {
$(".evisu-map-wrapper").toggleClass(" active");
if(window.activeIdentify!=""){
setTimeout(function(){
allTags[window.activeIdentify].moveToCenter();
}, 700);
}
});
}
//init 结束

// 自定义覆盖物
function renderOverlay(map) {

//公司业务逻辑不公开啦！！
//抛出闭包的用处,方便后面通过面板操作覆盖物

return tagContainer;
}

// 浏览器定位
function getCurrents(map,geolocation) {
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){

point = new BMap.Point(r.point.lng,r.point.lat);
map.centerAndZoom(point,12);
map.panTo(r.point);
} else {
alert('您的位置获取失败'+this.getStatus());
}
});
}

// 地图移动
function mapMove(allTags,map){
for(items in allTags){
allTags[items].hideTite();
}

if(window.activeIdentify!=""){
allTags[window.activeIdentify].showTite();
}

if(!window.nearby){
return;
}
var bs = map.getBounds();   //获取可视区域
var bssw = bs.getSouthWest();   //可视区域左下角
var bsne = bs.getNorthEast();   //可视区域右上角
var swLng = bssw.lng ,
swLat = bssw.lat ,
neLng = bsne.lng ,
neLat = bsne.lat;

var storeList='';
for(tag in allTags){
//公司业务逻辑不公开啦！！
}

}

//地图放大
function mapZoomend(allTags,map){

if(!window.nearby){
return;
}

var bs = map.getBounds();   //获取可视区域
var bssw = bs.getSouthWest();   //可视区域左下角
var bsne = bs.getNorthEast();   //可视区域右上角
var swLng = bssw.lng ,
swLat = bssw.lat ,
neLng = bsne.lng ,
neLat = bsne.lat;
var storeList='';
for(tag in allTags){
//公司业务逻辑不公开啦！！
}

$("#evisu-store-list").html(storeList);
}

//附近搜索
function searchNearby(allTags,map,geolocation){
window.nearby = true;
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
point = new BMap.Point(r.point.lng,r.point.lat);
map.centerAndZoom(point,12);
map.panTo(r.point);

var bs = map.getBounds();   //获取可视区域
var bssw = bs.getSouthWest();   //可视区域左下角
var bsne = bs.getNorthEast();   //可视区域右上角
var swLng = bssw.lng ,
swLat = bssw.lat ,
neLng = bsne.lng ,
neLat = bsne.lat;

for(tag in allTags){
var lng = allTags[tag]._point.lng,
lat =  allTags[tag]._point.lat;
if(lng>swLng && lng<neLng && lat>swLat && lat<neLat){

}else{

}
}

} else {
alert("无法获取您的位置,请开启浏览器定位权限,iphone用户打开手机【设置】-【隐私】-【定位服务】进行设置；安卓用户打开手机【设置】-【应用权限管理】-【权限管理】查看。或者打开地图APP或网页输入您的位置");
}
});

}