最近用Vue开发后台系统时,有些数据需要在地图上标注出来,需要用到地图功能,因为是国际项目,国内的地图不太适用,所以选用了谷歌地图,谷歌地图API: https://developers.google.cn/maps/documentation/javascript/tutorial。
<强> 1。获取密钥API键
首先,要使用谷歌地图JavaScript API,必须获取一个可用的API密钥,并且必须启用结算,具体获取步骤可百度查询,在此就不一一叙述了,主要想讲的地图用法。
<强> 2。海外服务器IP
。想要使用谷歌地图就需要翻墙了,公司购买的是发条云的账号,在浏览器上下载发条云安装,安装好之后输入用户账号和密码进行登录,就可以选择服务器进行操作了。
海外模式的网速比较慢,一般开发谷歌地图的时候,我才打开。
使用npm进行引入:
npm安装vue-google-maps
//mian.js中:
进口的vue-googlemaps/dist/vue-googlemaps.css '
从“vue-googlemaps”进口VueGoogleMaps
Vue。使用(VueGoogleMaps, {
负载:{//填入申请的apiKey账号
apiKey:”,
库:“地方”,
useBetaRenderer:假的,
}，
})
1。使用方法
//创建dom
& lt; div id=" allmap“ref=癮llmap祝辞& lt;/div>//创建谷歌地图
这一点。地图=new google.maps.Map (. getelementbyid (“allmap”), {//显示一个滑动条来控制地图的缩放级别
变焦:13,//设置地图中心点
中心:{lat: mapData [0]。纬度,液化天然气:mapData [0]。经度},//为了关闭默认控件集,设置地图的disableDefaultUI的属性为真实的
disableDefaultUI:没错,//通过单击缩放控件来缩放地图
gestureHandling:“合作”,//删除地图上的“缩放“控件按钮。
zoomControl:假的,//控制地图的类型路线图地图地形地图地形
卫星卫星图像混合卫星图像+地名
mapTypeId:“卫星”,//语言可选值:嗯,zh_en zh_cn
语言:zh_en//添加标记(红色的标点)
让标志=new google.maps.Marker ({//标点的位置
位置:{纬度:22.5397965915,液化天然气:114.0611121534},
地图:this.maps,//标点的名称
标题:“中华人民共和国”,//标点中的文字
标签:“深圳”,//标点的动画
动画:google.maps.Animation.DROP
});//创建消息窗口DOM,将内容包装在HTML DIV中,以便设置InfoWindow的高度和宽度。
让contentString=' & lt; div类=澳谌荨弊４? lt; h4>地图& lt;/h4> & lt; p>测试数据& lt;/p> & lt;/div>”;//地图的消息窗口:InfoWindow
让infowindow=new google.maps.InfoWindow ({
内容:contentString
});//点击标点事件
标记。addListener(“点击”,函数(){
infowindow.open(这一点。地图,标记);
});
示例图片:
2。结合项目
//mapPAge.vue
& lt; template>
& lt; div类="容器"比;
& lt; div id=" allmap“ref=癮llmap祝辞& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
安装(){//在安装中执行地图方法,mapData为要展示的数据
this.initMap (mapData);
}
方法:{
initMap (mapData) {
让=这个;//创建谷歌地图
这一点。地图=new google.maps.Map (. getelementbyid (“allmap”), {
变焦:13,//地图中心点,这里我以第一个数据的经纬度来设置中心点
中心:{lat: mapData [0]。纬度,液化天然气:mapData [0]。经度},
disableDefaultUI:假的,
zoomControl:假
});//设置满足条件的自定义标记图标
让imageblue=癅/img/map_blue.png”;
让成像仪=癅/img/map_red.png”;
让imagegray=癅/img/map_gray.png”;
让infoWindow=new google.maps.InfoWindow ();//循环渲染数据
mapData.map (currData=https://www.yisu.com/zixun/> {//判断当前图片
让currImg=" ";
如果(currData。行==0){
currImg=imagegray;
其他}{
如果(currData。可用的祝辞=4){
currImg=imageblue;
其他}{
currImg=成像仪;
}
}
让标志=new google.maps.Marker ({
位置:{lat: currData。纬度、液化天然气:currData。经度},
地图:this.maps,
标题:currData.name,//此处的图标为标记的自定义图标
图标:currImg,
动画:google.maps.Animation.DROP
});//多个标记点的点击事件
(函数(标记,currData) {
google.maps.event。addListener(标记”,点击“功能(e) {
让currLine=currData。行==1 & # 63;在“线”:“离线”;//设置消息窗口的统一内容
infoWindow.setContent (
' & lt; div类=澳谌荨弊４? lt; h4祝辞的+
currData.name +
& lt;/h4> & lt; p祝辞的+
currData。地址+
' & lt;/p> & lt;/h4> & lt; p祝辞& lt;跨度祝辞& lt;/span> & lt;跨度祝辞可用电池的+
+ currData。可用+
& lt;跨度祝辞& lt;/span> & lt;跨在空仓的+
+ currData。空+
' & lt;/span> & lt;/p> & lt; p祝辞机柜状态:& lt;跨度祝辞的+ currLine +
' & lt;/span> & lt;/p> & lt; p祝辞地理位置:& lt;跨在纬度:”+
currData。纬度+
”;日志:“+
currData。经度+
“& lt;/span> & lt;/p> & lt;/div>”
）;//调用infoWindow.open
infoWindow.open(这一点。地图,标记);
});
})(标记,currData);
})
}
}
}
