• 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详细地址
        <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 ' + this.getStatus());
    data.loc = defaultPoint;
    }
    loadMerchantInfo();//调用后台数据
    }, {enableHighAccuracy: true});
    } catch (err) {
    loadMerchantInfo();
    }
    }
    if (data.loc) {
    loadMerchantInfo();
    } else {
    initMap();
    }
  • 相关阅读:
    函数详解
    print()函数知识点总结
    python基本数据类型-字符串常用操作
    2020.7.17第十二天
    2020.7.16第十一天
    2020.7.15第十天
    2020.7.14第九天
    2020.7.13第八天
    2020.7.12第七天
    2020.7.11第六天
  • 原文地址:https://www.cnblogs.com/creatP/p/7929903.html
Copyright © 2020-2023  润新知