betway必威-betway必威官方网站
做最好的网站

web端调百度地图页面

在点击进入地图的入口(下面数据是vue渲染的数据)

<a class="navigation"  v-if="merchant.longitude && merchant.latitude"
   href="http://api.map.baidu.com/marker?location={{merchant.latitude}},{{merchant.longitude}}&title={{merchant.name}}&content={{merchant.address}}&output=html&src=hair">//latitude,longitude经纬度,name店名,address详细地址

    <img src="../img/navigation.png">
    到店
</a>
<a class="navigation" v-else
        href="http://api.map.baidu.com/geocoder?address={{merchant.province   merchant.city   merchant.district   merchant.address}}&output=html&src=hair">
    <img src="../img/navigation.png">
    到店
</a>


在引用两段百度js文件

<script type="text/javascript" src="http://www.lebaoshangcheng.com/uploads/allimg/190516/0251405T5-0.jpg"></script>
<script type="text/javascript" src="http://www.lebaoshangcheng.com/uploads/allimg/190516/0251406437-1.jpg"></script>

var data = {
    loc: JSON.parse(sessionStorage.getItem("loc")) || null, // 当前位置
};

var map;
function initMap() {
    try {
        map = new BMap.Map("l-map");
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                console.log('您的位置:'   r.point.lng   ','   r.point.lat);//(lng,lat经纬度)
          sessionStorage.setItem("loc", JSON.stringify(r.point));

                data.loc = r.point;//data.loc后台返回数据
            } else {
                console.warn('failedn'   this.getStatus());
                data.loc = defaultPoint;
            }
            loadMerchantInfo();//调用后台数据
        }, {enableHighAccuracy: true});
    } catch (err) {
        loadMerchantInfo();
    }
}
if (data.loc) {
    loadMerchantInfo();
} else {
    initMap();
}

本文由betway必威发布于网页设计,转载请注明出处:web端调百度地图页面

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。