vue3 腾讯地图选地获取经纬度

腾讯地图注册账号

腾讯地图开放平台

引入地图 js

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key"></script>

具体代码 (es-link的需要关闭)

<div id="container" class="map-box-map"></div>


import { ref, reactive, toRaw, onMounted } from 'vue'

const mapInit = () => {
  var myLatlng = new qq.maps.LatLng(36.62338, 101.78445)
  var myOptions = {
    zoom: 16,
    center: myLatlng,
    mapTypeId: qq.maps.MapTypeId.ROADMAP
  }
  var map = new qq.maps.Map(document.getElementById('container'), myOptions)
  // 添加监听事件
  qq.maps.event.addListener(map, 'click', function (event) {
    // console.log('您点击的位置为: [' + event.latLng.getLat() + ', ' + event.latLng.getLng() + ']')
    formState.coordinate = `${event.latLng.getLat()},${event.latLng.getLng()}`
  })

  var anchor = new qq.maps.Point(10, 30)
  var size = new qq.maps.Size(32, 30)
  var origin = new qq.maps.Point(0, 0)
  var icon = new qq.maps.MarkerImage('https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/plane.png', size, origin, anchor)
  size = new qq.maps.Size(52, 30)
  var originShadow = new qq.maps.Point(32, 0)
  var shadow = new qq.maps.MarkerImage(
    'https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/plane.png',
    size,
    originShadow,
    anchor
  );

  var marker = new qq.maps.Marker({
    icon: icon,
    shadow: shadow,
    map: map,
    position: myLatlng,
    animation: qq.maps.MarkerAnimation.BOUNCE
  })

  var jump = function(event) {
    marker.setPosition(event.latLng)
  }

  qq.maps.event.addListener(map, 'click', jump)
}

onMounted(() => {
  mapInit()
})