H5页面调起地图导航

h5页面拉起地图导航

• 新年快乐，在此㊗️大家万事如意，牛气冲天！

这里再次记录下， 在vue中使用百度地图，点击marker弹窗选择对应导航方式。

百度api文档

效果图

拉起导航方式

1. 高德地图

1. 调用方式

   http://uri.amap.com/marker?position=lng,lat&name=address&coordinate=gaode&callnative=1
   

2. 说明：

   • 其中position、name分别是经纬度和详情地址参数

3. api请查看

2. 百度地图

1. 调用方式

   http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名称&content=所在位置的简介&output=html
   

2. 说明：

   • 其中location、title、content分别是经纬度、标注点显示标题及标注点显示内容，output为指定输出类型，web上必须指定。

   • ios设备当切换底部tab时，会弹窗提示可能离开微信，打开第三方应用，根据需要操作即可。

3. api请查看

3. 腾讯地图

1. 调用方式

   http://apis.map.qq.com/uri/v1/marker?marker=coord:lat,lng;addr:address
   

2. 说明：

   • 其中coord、addr分别是经纬度和详情地址参数
   • 当用户没有安装腾讯地图APP应用时，点击时会直接跳转到浏览器提供下载。

3. api请查看

方式二

	<a href="https://apis.map.qq.com/uri/v1/geocoder?coord=22.558786,114.057934&amp;referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77" style="text-decoration:none;margin-top: 40px;" target="_blank">
	   <div style="width:98%; background: #2134ae; padding:8px 0px; color:#FFFFFF; border-radius:5px; text-align:center;margin-left: 1%;">导航</div>
	</a>

vue使用百度地图

• 安装

npm install vue-baidu-map --save

• 使用

这里使用局部注册组件

template

<div class='mapWrap page'>
    <baidu-map class="bm-view" ak="YOUR_APP_KEY" style="width: 100%; height: 100%"
		:center="{lng, lat}" :zoom="15" :scroll-wheel-zoom="true"
	>
        
        <bm-marker @click="show = true" :position="{lng, lat}" animation="BMAP_ANIMATION_BOUNCE">
            <bm-label :content="baseName" :labelStyle="{color: 'red', fontSize : '12px', borderRadius: '4px'}" :offset="{width: -35, height: 30}"/>
        </bm-marker>

        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" :locationIcon="icon"></bm-geolocation>
        
    </baidu-map>
    
    <!-- mask自行写样式 -->
    <div class="content">
        <ul>
            <!-- 这里可根据需求添加其他导航方式 -->
            <li>
                <a :href="autoNaviUrl">高德地图</a>
            </li>
        </ul>
    </div>
</div>

script

<script>
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
    import BmMarker from 'vue-baidu-map/components/overlays/Marker'
    import BmLabel from 'vue-baidu-map/components/overlays/Label'    
    import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation'

    export default {
        name: "Map",
        data() {
            return {
                lng: 116.404,
                lat: lat: 39.915,
                baseName: '北京天安门',
                icon: {
                    url: require('../../assets/images/icon/location_3.png'),
                    size: {width: 40, height: 40},
                    opts: {anchor: {width: 27, height:13}}
                },
                show: false,
                autoNaviUrl: ''
            };
        },
        components: {
            BaiduMap,
            BmMarker,
            BmGeolocation,
            BmLabel
        },

        created() {
            
            // 高德地图
            this.autoNaviUrl = `https://uri.amap.com/marker?position=${this.lng},${this.lat}&name=${this.baseName}`;
            
        },

    };
</script>

style

// 隐藏logo
<style>
    .BMap_cpyCtrl,
    .anchorBL {
        display: none;
    }
</style>