js 点击Map对应坐标,显示对应坐标信息

原创 1130331201 随笔 JS 187阅读 2018-05-15 11:37:20 举报

<div class="map block" id="map" ></div>//地图

<div class="replace block l w-100"></div>//地图对应坐标显示信息

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=key"></script>;
<script>
//创建地图实例
var map = new BMap.Map("map");
var point = new BMap.Point(120.159878, 30.296262);

map.centerAndZoom(point, 14);

var myIcon = new BMap.Icon("img/locat-map.png", new BMap.Size(25, 35));
var PIcon = new BMap.Icon("img/p.png", new BMap.Size(25, 35));
var mkr = new BMap.Marker(point, {
    icon: myIcon
});
map.addOverlay(mkr);
mkr.addEventListener("click",searchInfoWindow);
var content='<div class="block fff pd-1 mt-5">'
            +'<p class="block black"><span class="l f-18">XX停车场</span><span class="r">可充电</span></p>'
            +'<p class="block black">'
            +   '<span>泊位:23/33</span>'
            +   '<span>价格:2元/0.5分钟</span>'
            +'</p>'
            +'<p class="block black">距您当前位置:200米&nbsp;距离您目标地100米</p>'
            +'<p class="block black pt-5 mb-0 b-t">'
            + '<span class="l lh-30 mui-col-xs-6 inblock text-c">收藏</span>'
            + '<span class="r lh-30 mui-col-xs-6 inblock text-c">到这里去</span>'
            +'</p>'
    +'</div>';
function searchInfoWindow(e){
    var p = e.target;
    if(p instanceof BMap.Marker){ 
        $(".replace").html(content);
    }else{
        alert("无法获知该覆盖物类型");
    }
}
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e){
// 定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
console.log("当前定位地址为:" + address);

});
geolocationControl.addEventListener("locationError",function(e){
// 定位失败事件
console.log(e.message);
});
map.addControl(geolocationControl);

// 随机向地图添加5个标注
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i < 5; i ++) {
    var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
            addMarker(point);
    }
    // 编写自定义函数,创建标注
    function addMarker(point){
        var marker = new BMap.Marker(point,{icon:PIcon});
        map.addOverlay(marker);
        marker.addEventListener("click",searchInfoWindow);
    }

</script>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复