web端调百度地图页面

最新推荐文章于 2024-02-28 22:11:28 发布

转载最新推荐文章于 2024-02-28 22:11:28 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/creatP/p/7929903.html

文章标签：

#json #javascript #ViewUI

本文介绍了一个使用Vue.js实现的地图导航功能。通过判断商户位置信息是否存在经纬度，选择加载不同的百度地图链接。同时引入了百度地图JS API以实现地图功能。

在点击进入地图的入口（下面数据是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详细地址

    <span><img src="../img/navigation.png"></span>
    <span class="arrive">到店</span>
</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">
    <span><img src="../img/navigation.png"></span>
    <span class="arrive">到店</span>
</a>



在引用两段百度js文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=ztcvocCR1iGzerE5RhLXWHSjPQsZ6X9G"></script>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=ztcvocCR1iGzerE5RhLXWHSjPQsZ6X9G&amp;services=&amp;t=20171031174121"></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('failed\n' + this.getStatus());
                data.loc = defaultPoint;
            }
            loadMerchantInfo();//调用后台数据
        }, {enableHighAccuracy: true});
    } catch (err) {
        loadMerchantInfo();
    }
}
if (data.loc) {
    loadMerchantInfo();
} else {
    initMap();
}

转载于:https://www.cnblogs.com/creatP/p/7929903.html