700字范文 > 百度地图API自定义地图

百度地图API自定义地图

时间：2019-11-28 06:04:58

相关推荐

百度地图API自定义地图

一、使用说明 JavaScript API v1.4及以前版本无须申请密钥（ak），自v1.5版本开始需要先申请密钥（ak），才可使用。仅JavaScript API V2.0 版本支持https，其他JavaScript API版本均不支持。手机端引用需要添加meta标签<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> （这里需要注意一点：meta标签中的值不能改变，有些移动端写法可能改变了meta标签的值会造成移动端地图字体特别小的问题）。在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09。

二、百度地图使用

html中

<div style="width:100%;height:550px;" id="map"></div>//一定要有宽度和高度来显示地图

1、引用百度地图API文件

http://api./api?v=1.4 //参数v表示您加载API的版本，使用JavaScript APIv1.4及以前版本可使用此方式引用。http://api./api?v=2.0&ak=您的密钥 //使用JavaScript APIv2.0请先申请密钥ak，按此方式引用。

2、创建地图实例

var map = new BMap.Map("map"); //BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例，参数可以是元素id也可以是元素对象

3、创建点坐标

var point = new BMap.Point(116.404, 39.915); //用BMap命名空间下的Point类来创建一个坐标点

4、地图初始化

map.centerAndZoom(point, 15); //BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。

以上这样就可以实现一个百度地图的简单调用

5、地图状态的变化

map.panTo(new BMap.Point(116.409, 39.918)); //panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。

6、添加控件配置

map.enableScrollWheelZoom(true); //启用滚轮放大缩小

//向地图中添加缩放控件

var ctrlNav = new window.BMap.NavigationControl({

anchor: BMAP_ANCHOR_TOP_LEFT,

type: BMAP_NAVIGATION_CONTROL_LARGE

});

map.addControl(ctrlNav);

//向地图中添加缩略图控件

var ctrlOve = new window.BMap.OverviewMapControl({

anchor: BMAP_ANCHOR_BOTTOM_RIGHT,

isOpen: 1

});

map.addControl(ctrlOve);

//向地图中添加比例尺控件

var ctrlSca = new window.BMap.ScaleControl({

anchor: BMAP_ANCHOR_BOTTOM_LEFT

});

map.addControl(ctrlSca);

//地图标记点击事件;info是信息数组，index是信息数组中索引

map.clickelen = function(elem,info,index){

elem.openInfoWindow(info[index]);

};

map.addControl(new BMap.NavigationControl()); //添加平移缩放控件

map.addControl(new BMap.ScaleControl());//添加比例尺控件

map.addControl(new BMap.OverviewMapControl()); //添加缩略图控件

7、修改控件样式

var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} //修改平移控件样式map.addControl(new BMap.NavigationControl(opts));

var opts = {offset: new BMap.Size(150, 5)} //修改比例尺的偏移位置 map.addControl(new BMap.ScaleControl(opts));

8、判断是否支持h5浏览器定位

function map_init() {

//判断是否支持h5浏览器定位start

map= new BMap.Map("map");

if (navigator.geolocation){

window.navigator.geolocation.getCurrentPosition(function(position){

//ios10

var geolocation = new BMap.Geolocation();

geolocation.getCurrentPosition(function(position){

lat = position.point.lat;

lng = position.point.lng;

mapGPS(lat,lng,10); //获取成功定位后执行的函数

},function(error){

alert("errorCode:"+error.code+",errorMessage:"+error.message);

console.log("errorCode:"+error.code+",errorMessage:"+error.message);

});

//IOS10 end

}, function(error){

// oalert("GPS信号不稳定,无法精确定位");

function theLocation(cityName){//根绝城市名定位

var city = cityName;

if(city != ""){

map.centerAndZoom(cityName,11);// 用城市名设置地图中心点

}

function myFun(result){

var cityName = result.name;

//获取城市名cityName

theLocation(cityName);

}

var myCity = new BMap.LocalCity();

myCity.get(myFun);

});

}else{

alert("无法获取当前位置");

}

//判断是否支持h5浏览器定位end

}

9、动态添加多个标注点以及点击标注点弹出信息框

var point = new Array(); //存放标注点经纬信息的数组

var marker = new Array(); //存放标注点对象的数组

var info = new Array(); //存放提示信息窗口对象的数组

var markerArr;//获取到的数据集合

var markerArrlen;//后台传过来的数据长度

//调用地图

function mapall(markerArr,markerArrlen,point,marker,info,markMan){

for (var i = 0; i < markerArr.length; i++) {

var p0 = markerArr[i].lng ; //

var p1 = markerArr[i].lat ; //按照原数组的point格式将地图点坐标的经纬度分别提出来

var me_point = new window.BMap.Point(p0, p1); //循环生成新的地图点

//将gps坐标转换成百度坐标

markMan++;

var me_point2 = new window.BMap.Point(p0, p1); //循环生成新的地图点

var imgurl ="${context}/resources/cellar/images/map_me2.png";

var myIcon = new BMap.Icon(imgurl, new BMap.Size(18,33));

marker[i] = new BMap.Marker(me_point2,{icon:myIcon}); // 创建标注

map.addOverlay(marker[i]);

info[i] = new window.BMap.InfoWindow("<p class='addresstext'>姓名：" + markerArr[i].name + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].mobile + "</br></p >"); // 创建信息窗口对象

if(markMan==parseInt(markerArrlen)){

for(var h=0;h<markerArr.length;h++){

//标记绑订点击事件;

var info2 = info;

marker[h].index=h;

marker[h].addEventListener("click", function(){

map.clickelen(this,info2,this.index);

});

}

10、清除之前添加信息

map.clearOverlays(); //清除之前添加的标注等

11、让自己写的所有地图标注显示在最佳视野内的实现方法