百度地图生成代码

前言：

单独一个文件放置html,需要用的模块iframe引入

<!--body内的部分-->
<!--<div style="width:100%;height:334px;font-size:12px;box-sizing: border-box;" id="map"></div>-->



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
    <title>百度地图API自定义地图</title>
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qcpFF1Qtj95Guk1XFTjjBe7IZfxLKsFL"></script>
  </head>
  
  <body>
    <!--百度地图容器-->
    <div style="width:100%;height:334px;font-size:12px;box-sizing: border-box;" id="map"></div>
  </body>
   <script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
//    addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map"); 
      map.centerAndZoom(new BMap.Point(104.090539,30.636951),16);
    }
    function setMapEvent(){
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
      var plOpts = [
        {strokeColor:"#f00",strokeWeight:"4",strokeOpacity:"0.6"}
      ];
      var plPath = [
        [
          new BMap.Point(104.08903,30.633875),
          new BMap.Point(104.089928,30.635832),
          new BMap.Point(104.092839,30.634745),
          new BMap.Point(104.09327,30.636019),
          new BMap.Point(104.095354,30.635397),
          new BMap.Point(104.095318,30.635397),
          new BMap.Point(104.095318,30.635397),
          new BMap.Point(104.095318,30.635397)
        ],
      ];
      for(var index = 0; index < plOpts.length; index++){
        var polyline = new BMap.Polyline(plPath[index],plOpts[index]);
        map.addOverlay(polyline);
      }
    }
    //向地图添加控件
    function addMapControl(){
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      map.addControl(navControl);
    }
    var map;
      initMap();
  </script>
</html>

效果：

如果没有显示出来，可能ak号码已过期，需要重新生成

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qcpFF1Qtj95Guk1XFTjjBe7IZfxLKsFL"></script>

登录百度地图开放平台，找到ak号码

百度地图生成代码

猜你喜欢