百度地图API自定义地图

百度地图API自定义地图百度地图API自定义地图一、使用说明JavaScriptAPIv1.4及以前版本无须申请密钥(ak),自v1.5版本开始需要先申请密钥(ak),才可使用。仅JavaScriptAPIV2.0版本支持https,其他JavaScriptAPI版本均不支持。手机端引用需要添加meta标签<metaname=”viewport”content=”initial-scale=1.0,user-scalable=no”/>(这里需要注意一点:meta标签中的值不能改变,有些.

百度地图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.map.baidu.com/api?v=1.4 //参数v表示您加载API的版本,使用JavaScript APIv1.4及以前版本可使用此方式引用。
http://api.map.baidu.com/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()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。

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

百度地图API自定义地图

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);
            });
            }
        }
    }
}

百度地图API自定义地图

 

 

10、清除之前添加信息

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

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

map.setViewport(viewpoints);
这里需要注意的是:viewpoints必须是个数组,不能是单个点。
还可能遇到的bug:viewpoints按数组添加的,但是刚进地图没有显示出来得缩小地图才能看到,可能的原因是:
map.centerAndZoom("北京市", 12); map.setViewport(points); //你的centerAndZoom函数设置成城市名了,该情况下百度会做很多后续处理,
map.setViewport(points);这句代码是执行了的,但是map.centerAndZoom("北京市", 12); 这句代码好像有类似回调函数之类的操作,他会覆盖map.setViewport(viewpoints);这句代码的执行结果。

今天的文章百度地图API自定义地图分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/32918.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注