zoukankan      html  css  js  c++  java
  • 生成百度地图

    http://api.map.baidu.com/lbsapi/creatmap/网址

    一步步

    注册百度帐号获取密钥即可

    <!--百度地图容器-->
      <!--引用百度地图API-->
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LNr5D7cir4efHvWX67rpknIe"></script>
        <div style="99%; margin:auto; margin-bottom:40px; height:400px;border:#fff solid 5px;font-size:12px;"  id="map"></div>
     


      <script type="text/javascript">
        //创建和初始化地图函数:
        function initMap(){
          createMap();//创建地图
          setMapEvent();//设置地图事件
          addMapControl();//向地图添加控件
          addMapOverlay();//向地图添加覆盖物
        }
        function createMap(){
          map = new BMap.Map("map");
          map.centerAndZoom(new BMap.Point(117.148353,36.671086),16);
        }
        function setMapEvent(){
          map.enableScrollWheelZoom();
          map.enableKeyboard();
          map.enableDragging();
          map.enableDoubleClickZoom()
        }
        function addClickHandler(target,window){
          target.addEventListener("click",function(){
            target.openInfoWindow(window);
          });
        }
        function addMapOverlay(){
          var markers = [
            {content:"我的备注",title:"我的标记",imageOffset: {0,height:3},position:{lat:36.668814,lng:117.14776}},
            {content:"我的备注",title:"我的标记",imageOffset: {0,height:3},position:{lat:36.675182,lng:117.142909}},
            {content:"我的备注",title:"我的标记",imageOffset: {0,height:3},position:{lat:36.665182,lng:117.142919}}
          ];
              var linetmp=null;
                  var lastmarker=null;
                      var fist=true;
          for(var index = 0; index < markers.length; index++ ){
            var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
            var marker = new BMap.Marker(point,{icon:new BMap.Icon("images/icon.png",new BMap.Size(20,25),{
              imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
            })});
            var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
            var opts = {
              200,
              title: markers[index].title,
              enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
            marker.setLabel(label);
            addClickHandler(marker,infoWindow);
            map.addOverlay(marker);
            
            ////////////添加路线部分/////////////////
                if(index>0){
                    var polyline = new BMap.Polyline([linetmp,point],{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});   //创建折线
                    map.addOverlay(polyline);   //增加折线
                    polyline.enableEditing();
                    }
                
                linetmp=point;
                lastmarker=marker;
                    if(fist){
                    last_point=linetmp;
                fist=false;
                //alert(linetmp);
                }
                ///////////////////////////////////////////////
          };
        }
        //向地图添加控件
        function addMapControl(){
          var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
          scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
          map.addControl(scaleControl);
          var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
          map.addControl(navControl);
          var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
          map.addControl(overviewControl);
        }
        var map;
          initMap();
      </script>
     

  • 相关阅读:
    搜狗五笔快捷键
    [原抄] Potplayer 1.7.2710 快捷键
    权限设置并未向在应用程序容器 不可用
    fork( )函数(转载)
    软件开发中的迭代(转载)
    进程间通信的方式(转载)
    P NP NPC(1)(转载)
    P NP NPC(2)(转载)
    大小端字节序
    求n对括号的排列组合(卡特兰数)
  • 原文地址:https://www.cnblogs.com/zhouyx/p/4387681.html
Copyright © 2011-2022 走看看