vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例

一、最终效果

1、全量定位

vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例_第1张图片

2、获取当前位置定位

vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例_第2张图片

3、标点后回显选点的地址

vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例_第3张图片
vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例_第4张图片

4、点击导航,打开弹窗选择高德地图,会进入第三方app中显示路线

vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例_第5张图片
vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例_第6张图片

5、地图已经封装成一个组件(AMapComponents),testMap页面只有一句代码

vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例_第7张图片

二、 组件码云地址

注意点:

  • 地图导航按钮是是异步组件(需要渲染template标签),需要在配置文件(vue.config.js)加上runtimeCompiler: true
  • 需要按下面方式引入,才能调用new AMap
    vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例_第8张图片

vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例_第9张图片

你可能感兴趣的:(Vue,H5移动端项目,vue,组件化,高德地图,vue-cli4,移动端)