vue使用腾讯地图实现点标记并选取位置

1.登录腾讯位置服务控制台，如果没有注册过账号，请点击注册按钮注册成为腾讯位置服务开发者

2.创建应用和Key：

• 1. 进入控制台后，展开菜单并选择我的应用
• 2. 点击右侧创建应用，如果已经创建过应用，可以直接选择添加Key
• 3. Javascript API GL并不需要勾选任何产品，直接创建Key就可以使用（在引入API库时需要将key做为参数传入）    

3.在vue根项目中的public文件夹中找到index.html文件，并添加

<script src="https://map.qq.com/api/gljs?v=1.exp&key=your key"></script>

4.初始化地图

<template>
  <div id="map" style="height: 400px" />
</template>

定位地图初始化方法
initMap() {
const TMap = window.TMap
// 设置中心坐标点
var center = new TMap.LatLng(28.68, 115.89)
var map = new TMap.Map(document.getElementById('map'), {
  center: center, // 设置地图中心点坐标
  zoom: 8, // 设置地图缩放级别
  viewMode: '2D'
})

```
// 设置点标记
var markerLayer = new TMap.MultiMarker({
  id: 'marker-layer',
  map: map,
  styles: {
    // 点标记样式
    marker: new TMap.MarkerStyle({
      width: 20, // 样式宽
      height: 30, // 样式高
      anchor: { x: 10, y: 30 } // 描点位置
    })
  },
  geometries: [
    {
       // 该id用于修改点标记，唯一
      'id': 'marker',
      'styleId': 'marker',
      'position': center,
      'properties': {
        'title': 'marker1'
      }
    }
  ]
})


const _this = this
map.on('click', function(evt) {
// 点击地图，修改点标记位置
  markerLayer.updateGeometries([
    {
      styleId: 'marker',
      id: 'marker',
      position: new TMap.LatLng(evt.latLng.lat, evt.latLng.lng)
    }
  ])
  // 事件传递，子组件将参数传递给父组件，返回经纬度
  // 父组件使用 @getLocation="receiveLocation" 接受子组件传递的经纬度
  _this.$emit('getLocation', { lat: evt.latLng.lat, lng: evt.latLng.lng })
})
}