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&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

    
        
        
            
        

        
        
    
    
    
    

        

            
            

                高德地图
            
        
    

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