vue2.0中如何调用腾讯地图api?

来源:互联网 发布:java object转date 编辑:程序博客网 时间:2024/05/17 05:17

1.index.html


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

2.页面引入


<script>export default {  mounted:function(){    this.init()  },  methods:{    init:function () {      var myLatlng = new qq.maps.LatLng(31.584617993869276, 120.29067993164062);      var myOptions = {        zoom: 12,        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() + ']');      });    }  }}</script>

注意。。。

开头引入的src里的http和https,,根据实际情况改动下即可

原创粉丝点击