百度地图

最新推荐文章于 2023-06-15 14:36:39 发布

红卡

最新推荐文章于 2023-06-15 14:36:39 发布

阅读量128

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/wyj1122/article/details/91038383

版权

学习笔记专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=y2pLGjbnXMVmxEhqDM6ZKmWqusOzEjB6"></script>
<script type="text/javascript">
  function toAddress (lng,lat) {
    map.panTo(new BMap.Point(lng,lat),15); 
  }
</script>
  <script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    /*创建地图*/
    function createMap(){ 
      map = new BMap.Map("map"); 
      map.centerAndZoom(new BMap.Point({$lng_lat['0']['lng']},{$lng_lat['0']['lat']}),15); //设置地图中心点及缩放级别
    }
    /*设置地图事件*/
    function setMapEvent(){
      map.enableScrollWheelZoom();        //开启鼠标滚轮缩放
      map.enableDragging();                     //开启可拖拽
      map.enableDoubleClickZoom()          //开启双击放大
    }
    /*点击事件*/
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    /*向地图添加覆盖物*/
    function addMapOverlay(){
      /*添加图标标记*/
      var markers = [
        <?php foreach ($lng_lat as $v) {
        ?>
        {content:"{$area[$v['province']].$area[$v['city']].$area[$v['area']].$v['address']}",title:"{$v['mac_id']}",imageOffset: {width:0,height:3},position:{lat:{$v['lat']},lng:{$v['lng']}}},
        <?php }?>
      ];
      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("http://yunos.youquwu.net/static/images/biaoji.png",new BMap.Size(48,48),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(48,14)});
        label.setStyle({
            border:"none",
            background:"rgba(0,0,0,0.4)",
             color : "#fff",
             fontSize : "12px",
             height : "20px",
             lineHeight : "20px",
             fontFamily:"微软雅黑"
           });
        var opts = {
          width: 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);
      };
     }
    /*向地图添加控件*/
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});     
      scaleControl.setUnit(BMAP_UNIT_METRIC);     //公制单位
      map.addControl(scaleControl);//比例尺地图左下角
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE,enableGeolocation: true});
      map.addControl(navControl); //平移缩放控件右上
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false});
      map.addControl(overviewControl);//缩略地图默认关闭
    }
    var map;
      initMap();
  </script>