地图（pc和移动端）

一、PC端

---

腾讯地图：

1、申请key（唯一key值）
2、html中引入API库
3、在VUE页面中进行操作

创建地图实例（经纬度中心点）
创建覆盖物实例（标注[经纬度标记点]，信息提示窗口...）
创建控件实例
创建服务实例等（poi检索[即搜索]...）
（参考api进行相应操作，会用到经纬度等信息）

3、使用说明：

new地图实例
new事件
new覆盖物（标注、折线等）
new控件（导航控件，比例尺控件等）
等等，具体需要的看API（都是先创建，在配置挂载地图实例）。创建实例之后api文件中实例对象有一些属性和方法可用。
总结：new一个所需要的东西，进行初始化配置（配置里面基本都要设置是要挂载在哪个个地图实例中 map:map）

4、demo

public的index.html文件中：
	// 引入腾讯地图API
	<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=KD5BZ-MO4R4-PLNU4-XG2Q5-MBIFJ-27FT5"></script>

vue页面中：
    // 初始化地图
    init() {
      console.log(window.qq.maps)
      this.showMapVisible = true
      const that = this
      const centerData = new window.qq.maps.LatLng(that.position.lat, that.position.lng)
      // 创建地图实例（对象）
      // 参数一：地图容器
      const map = new window.qq.maps.Map(document.getElementById('mapContainer'), {
        // 地图的中心地理坐标。
        center: centerData,
        zoom: 13
      })

      const decoration = new window.qq.maps.MarkerDecoration(1, new window.qq.maps.Point(-1, -5))
      // 创建生成标注实例
      // 对标注实例进行初始化
      const marker = new window.qq.maps.Marker({
        position: centerData, // 标注点
        map: map, // 标注要添加到的具体地图对象
        decoration
      })

      // 创建信息提示窗口
      const info = new window.qq.maps.InfoWindow({
        map: map
      })
      that.markerClick(info, centerData)
      // 标记Marker点击事件
      window.qq.maps.event.addListener(marker, 'click', function() {
        that.markerClick(info, centerData)
      })
    },

    // 信息提示窗口
    markerClick(info, center) {
      // 打开信息窗口
      info.open()
      // 窗口中内容
      info.setContent(`<div style="text-align:center;white-space:nowrap;margin:10px;">${this.position.address}</div>`)
      // 放置的位置
      info.setPosition(center)
    },

二、移动端：

---

1、微信内置地图

2、唤醒高德地图

      wx.openLocation({
        latitude: 34.232092,
        longitude: 108.880496,
        scale: 18
      })

（移动端微信调用wx.openLocation）（h5判断android还是ios--跳转到对应的链接接口，如果没有对应App就不会唤醒，就不在当前浏览器，此时地址进入应用宝下载）

    goMap() {
      const u = navigator.userAgent
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      // 这个是安卓操作系统
      if (isAndroid) {
        var d = new Date()
        var t0 = d.getTime()
        // 跳转到高德地图app(唤醒高德地图)
        window.location.href = 'androidamap://viewMap?sourceApplication=卡唤唤&poiname=话费商家&lat=34.232092&lon=108.880496&dev=0'
        // 调用需要时间，所以判断是否有该APP并且调用，需要叫一个定时器判断
        setTimeout(function () {
          // 判断是否切出浏览器
          // true隐藏(已经跳转到app) false没有隐藏
          const hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
          if (typeof hidden === 'undefined' || hidden === false) {
            // 在该浏览器中打开高德地图（网页版地图）
            window.location.href = 'https://uri.amap.com/marker?position=108.880844,34.232054'
          }
        }, 2500)
      }
      // 这个是ios操作系统
      if (isIOS) {
        var b = new Date()
        var t1 = b.getTime()
        window.location.href = 'https://uri.amap.com/marker?position=108.880844,34.232054'
        // 判断是否切出浏览器
        setTimeout(function () {
          const hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
          if (typeof hidden === 'undefined' || hidden === false) {
            console.log(888)

            window.location.href = 'iosamap://viewMap?sourceApplication=appname&poiname=abc&lat=34.232092&lon=108.880496&dev=0'
          }
        }, 2500)
      }
    }