百度地图标注基础篇-向日葵屋

百度地图标注基础篇

蔚落 2021-09-10 05:06 575阅读 0赞

<script type="text/javascript">  
var mapObj = new BMap.Map("mapObj");          // 创建地图实例  
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
mapObj.addControl(ctrl_nav);
mapObj.enableDragging();//启用地图拖拽事件，默认启用(可不写)
mapObj.enableScrollWheelZoom();//启用地图滚轮放大缩小
mapObj.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
mapObj.enableKeyboard();//启用键盘上下左右键移动地图
//mapObj.centerAndZoom("<?php echo $defaultcity?>");
if(window.top.$('#<?php echo $field?>').val()) {
    drawPoints();
} else {
    mapObj.centerAndZoom("<?php echo $defaultcity?>");
}
var localSearch = new BMap.LocalSearch(mapObj);
   localSearch.enableAutoViewport(); //允许自动调节窗体大小
function keywordSearch() {
    mapObj.clearOverlays();//清空原来的标注
    var keyword = document.getElementById("keyword").value;
     localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0);
  //      document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
        mapObj.centerAndZoom(poi.point, 13);
        var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度
        mapObj.addOverlay(marker);
        var content = document.getElementById("keyword").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
        marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
        // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    });
    localSearch.search(keyword);
}
function drawPoints(){
    var data = window.top.$('#<?php echo $field?>').val();
    var data = data.split('|');
    var lngX = data[0];
    var latY = data[1];
    var zoom = data[2] ? data[2] : 10;
    mapObj.centerAndZoom(new BMap.Point(lngX,latY),zoom);
    // 创建图标对象
    var myIcon = new BMap.Icon('<?php echo IMG_PATH ?>icon/mak.png', new BMap.Size(27, 45));
    // 创建标注对象并添加到地图
    var center = mapObj.getCenter();
    var point = new BMap.Point(lngX,latY);
    var marker = new BMap.Marker(point, {icon: myIcon});
    marker.enableDragging();
    mapObj.addOverlay(marker);
    var ZoomLevel = mapObj.getZoom();
    marker.addEventListener("dragend", function(e){  
        window.top.$('#<?php echo $field?>').val(e.point.lng+'|'+e.point.lat+'|'+ZoomLevel); 
    }) 
}
function addMarker(){ 
      mapObj.clearOverlays();
      // 创建图标对象
      var myIcon = new BMap.Icon('<?php echo IMG_PATH ?>icon/mak.png', new BMap.Size(27, 45));
      // 创建标注对象并添加到地图
      var center = mapObj.getCenter();
      var point = new BMap.Point(center.lng,center.lat);
      var marker = new BMap.Marker(point, {icon: myIcon});
      marker.enableDragging();
      mapObj.addOverlay(marker);
      var ZoomLevel = mapObj.getZoom();
      window.top.$('#<?php echo $field?>').val(center.lng+'|'+center.lat+'|'+ZoomLevel);
      marker.addEventListener("dragend", function(e){  
        window.top.$('#<?php echo $field?>').val(e.point.lng+'|'+e.point.lat+'|'+ZoomLevel); 
    }) 
}
function mapClose(){
    var CityBox=$(".CityBox");
    if(CityBox.css('display')=='none'){
        CityBox.show();
    }else{
        CityBox.hide();
    }
}
function removeMarker() {
    mapObj.clearOverlays();
    mapObj.centerAndZoom("<?php echo $defaultcity?>");
    $("#curCity").html('<?php echo $defaultcity?>');
    window.top.$('#<?php echo $field?>').val('');
}
</script>