百度地图，创建标点

Posted 2020-11-09 王保利d窝

   引用一个地图的网络路径

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥1g1fQ88FPyxtTBZakPQzIqPRVf1ZrSEq"></script>

页面放一个div即可

<div id="ditu">
   </div>

页面加载完成后一个执行一个函数

$(function(){

　　newMap()

})

 

function newMap(){
    //创建地图实例
    var map = new BMap.Map("ditu");
    //设置中心点坐标
    var point = new BMap.Point(118.051324, 36.797857);
    //根据中心点和层级显示地图
    map.centerAndZoom(point, 15);
    //设置显示城市
    map.setCurrentCity("淄博");  
    //设置滚轮缩放
    map.enableScrollWheelZoom();
    //禁用双击放大
    map.disableDoubleClickZoom();
    addMarker(map);
}
/*功能：双击时添加一个标注*/
function addMarker(map){
    //定义一个数组，保存点击的点的经纬度
    var pointArr = [];
    map.addEventListener("dblclick",function(e){
        //获取当前点击点的经纬度，在此位置添加标注
        var nowPoint = new BMap.Point(parseFloat(e.point.lng),parseFloat(e.point.lat));
        //console.log(nowPoint);
        //将本次点击的经纬度追加进数组
        pointArr.push(nowPoint);
        //console.log(pointArr);
        //设置标注图标
        var myIcon = new BMap.Icon("../../resouse/img/10.dingweishen/8.png",new BMap.Size(36, 36),{anchor: new BMap.Size(10, 35)});
        //创建标注
        var marker = new BMap.Marker(nowPoint,{icon:myIcon});
        //将标注添加到地图中
        map.addOverlay(marker);
        //设置标注信息及文本
        var opts = {
            width : 150,     // 信息窗口宽度
            height: 60,     // 信息窗口高度
            title : "海底捞王府井店" , // 信息窗口标题
            enableMessage:true,//设置允许信息窗发送短息
            message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
        };
        var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
        marker.addEventListener("click", function(){          
            map.openInfoWindow(infoWindow,nowPoint); //开启信息窗口
        });
        //设置的标注点可以拖拽
        //marker.enableDragging();
        //根据点显示折线:pointArr--点的数组。折线的颜色，折线的宽度，折线的透明度
        var polyline = new BMap.Polyline(pointArr,{strokeColor:"black", strokeWeight:2, strokeOpacity:0.5});
        //将点连成线
        map.addOverlay(polyline);
    });
}