Vue-高德地图的使用

一、实现根据地图选择位置

template

<span>{
   {
   location}}</span>
<iframe
  id="mapContainer"
  src="https://m.amap.com/picker/?center=116.3972,39.9696&key=608d75903d29ad471362f8c58c550daf"
></iframe>

script

data(){
   
	return{
   
		location:''
	}
}
mounted(){
   
	const that = this;
	var iframe = document.getElementById("mapContainer").contentWindow;
	document.getElementById("mapContainer").onload = function() {
   
	  iframe.postMessage("hello", "https://m.amap.com/picker/");
	};
	window.addEventListener(
	  "message",
	  function(e) {
   
	    //设置点击的内容
	    that.location = e.data.name;
	    //隐藏地图
	    document.getElementById("mask").style.zIndex = -1000;
	  },
	  false
	);
}

二、显示指定地点的地图

template

<div id="mapContainer" style="height:600px;width:600px"><