第一步 引入goole 脚本
在 index.html 中
<script
src="http://ditu.google.cn/maps/api/js?key=AIzaSyAXmxkZM3X8EirioIheSCskOIYjr4Msl6M&language=zh-CN"></script>
如果项目分测试环境http: 和正式环境 https:，最好 把http: 去掉
<script
src="http://ditu.google.cn/maps/api/js?key=AIzaSyAXmxkZM3X8EirioIheSCskOIYjr4Msl6M&language=zh-CN"></script>
否者在https 上引入不了，而去掉后它就会默认之前页面的前缀，就是你自己分的测试和正式环境
需要配置的是 key google 申请的key 语言 language
第二步 创建地图
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,
//不要地图上的 放大缩小 其他悬浮工具栏 设为true
// disableDefaultUI: true,
// navigationControl:false,
// scaleControl: false
});
//添加单击地图的 事件监听
_this.map.addListener('click',function () {
console.log('点击进入大页面')
// 点击实际操作
_this.$router.push({
name:'TripMap'
})
})
第三步 添加坐标点
data 中参数
markers:[],//marker 数组
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})
//根据经纬度 点集 生成 path
var tripPath = new google.maps.Polyline({
path: _this.tripCoordinates,
geodesic:true,
strokeColor:'#888888',
strokeOpacity:1.0,
strokeWeight: 2
});
// 把路径添加到 地图上
tripPath.setMap(_this.map);
}
