第一步 引入goole 腳本
在 index.html 中
<script
src="http://ditu.google.cn/maps/api/js?key=AIzaSyAXmxkZM3X8EirioIheSCskOIYjr4Msl6M&language=zh-CN"></script>
如果項目分測試環(huán)境http: 和正式環(huán)境 https:教硫，最好 把http: 去掉
<script
src="http://ditu.google.cn/maps/api/js?key=AIzaSyAXmxkZM3X8EirioIheSCskOIYjr4Msl6M&language=zh-CN"></script>
否者在https 上引入不了，而去掉后它就會默認之前頁面的前綴，就是你自己分的測試和正式環(huán)境
需要配置的是 key google 申請的key 語言 language
第二步 創(chuàng)建地圖
initGoogleMap(lat,lng){
let _this = this
var myLatlng = {lat:lat,lng:lng};
_this.map = new google.maps.Map(this.$refs.bmap,{
zoom:12,
center:myLatlng,
//不要地圖上的 放大縮小 其他懸浮工具欄 設(shè)為true
// disableDefaultUI: true,
// navigationControl:false,
// scaleControl: false
});
//添加單擊地圖的 事件監(jiān)聽
_this.map.addListener('click',function () {
console.log('點擊進入大頁面')
// 點擊實際操作
_this.$router.push({
name:'TripMap'
})
})
第三步 添加坐標點
data 中參數(shù)
markers:[],//marker 數(shù)組
map:’’, //地圖
tripCoordinates:[], // 坐標點
icon: require('./image/point.png’), // maker icon
往地圖上添加 單個 marker
addMarkerWithTimeout(position,timeout){
let _this = this
window.setTimeout(function () {
_this.markers.push(new google.maps.Marker({
position:position,
map:_this.map,
animation:google.maps.Animation.DROP, // maker 下落動畫
icon:_this.icon, // 可以自定義 maker 圖片
// label:'這個上去了嗎'
}));
}, timeout);
},
清空地圖上的 maker
clearMarkers(){
for (var i = 0; i < this.markers.length; i++){
this.markers[i].setMap(null);
}
this.markers = [];
},
動畫的方式 在地圖上添加多個maker
drop(){
this.clearMarkers()
for(var i = 0; i < this.trip.cities.length; i ++){
let city = this.trip.cities[i]
if(city.cityLat.length > 0 && city.cityLng.length){
console.error()
let position = {lat:parseFloat(city.cityLat),lng:parseFloat(city.cityLng)}
this.tripCoordinates.push(position)
// console.error('進來了3333333')
this.addMarkerWithTimeout(position,i * 200);
}
}
},
第四部 如果要在各個maker 之間劃線的話
addPath(){
let _this = this
// _this.tripCoordinates.push({lat:38.77216,lng:21.29113})
//根據(jù)經(jīng)緯度 點集 生成 path
var tripPath = new google.maps.Polyline({
path: _this.tripCoordinates,
geodesic:true,
strokeColor:'#888888',
strokeOpacity:1.0,
strokeWeight: 2
});
// 把路徑添加到 地圖上
tripPath.setMap(_this.map);
}
