咨询电话:
15628812133
14
2018/07

百度地图api的调用及自定义

发布时间:2018-07-14 10:55:03
发布者:chaobai
浏览量:
0

        在进行塑邦项目时,联系我们的栏目中用到了调用地图显示公司坐标,其坐标图标、公司地点、地图显示位置都需要调用及自定义。此项目中地图的显示,是调用的百度地图API接口,下面会介绍具体的实现步骤。

map1.jpg

        一、百度账号申请、百度地图开放平台AK的获取

        二、根据项目需求,选择不同的地图调用及自定义方法。如本项目中需要自定义地点的图标标识、地点显示的位置和中心点设置等

        三、实现方法

              1.引入百度地图API文件

                Image 4.jpg

              2.创建div容器,并设置容器和地图的宽高

                Image 5.jpg

              3.javascript设置

     var map = new BMap.Map("allmap"); //创建地图实例
     var point = new BMap.Point(117.09902,36.687767);//地图点    
     var point1 = new BMap.Point(117.095903,36.687726);//视角中心点    
     map.enableScrollWheelZoom();    //允许缩放
     map.centerAndZoom(point, 18.5);  //设置缩放级别(3-19)
     map.setCenter(point1);  //设置视角中心点   
     //创建图标    
     var pt = new BMap.Point(117.09902,36.688081);  //图标位置坐标
     var myIcon = new BMap.Icon("/statics/subang/img/contact_map_icon.png", new BMap.Size(181,75)); //图标大小
     var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注    
     map.addOverlay(marker2);  // 将标注添加到地图中


关键词:
返回列表