Vue中高德地图的使用
2019-06-12 本文已影响5人
羽翼的翼
介绍: 该地图包含功能有:
- 点击地图自动获取定位和经纬度到文本框
- 文本框输入地址 失去焦点后自动获得经纬度
1. 在index.html中引入
<!--引入高德地图JSAPI -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=你的Key值"></script>
<!--引入UI组件库（1.0版本） -->
<script src="http://webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script>
// 为了防止报map未定义这个错误
window.onload=function(){
var map
}
</script>
</body>
2. 在webpack.base.conf.js中的操作
在module.exports中添加以下代码
externals: {
'AMap': 'AMap'
}
3. 在引入的文件中的操作
3.1 导入
import AMap from 'AMap' // 这是为了防止报错说AMap is not defined
3.2 使用
在template中的操作
<div id="map-container" class="map_box">
</div>
// 地图的操作
mounted() {
var this_ = this
// 加入高的地图
console.log(3)
map = new AMap.Map('map-container', {
resizeEnable: true,
zoom: 15
})
AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
console.log(1)
map.addControl(new AMap.ToolBar())
map.addControl(new AMap.Scale())
})
AMap.service('AMap.Geocoder', function() { // 回调函数
})
// 加载搜索列表
this_.myMapViewLocation()
map.on('click', function(e) {
this_.commitFrom.Longitude = e.lnglat.lng
this_.commitFrom.Latitude = e.lnglat.lat
// 填写地址
this_.writeAddress([e.lnglat.lng, e.lnglat.lat])
this_.mapsearch()
this_.addMarker([e.lnglat.lng, e.lnglat.lat])
})
// placeSearch.search("北京")
},
methods: {
// 地图start
// 地图搜索
mapsearch() {
this.myMapViewLocation(this.commitFrom.Longitude, this.commitFrom.Latitude)
},
// 回显
myMapViewLocation(mlon, mlat) {
var this1 = this
// console.log("回显坐标")
if (mlon && mlat) {
// removeMarkers(lnglatXY)
lnglatXY = [mlon, mlat]
this1.addMarker(lnglatXY)
}
},
// 移除之前的标点
removeMarkers(lnglatXY) {
marker = new AMap.Marker({
map: map,
position: lnglatXY,
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
offset: new AMap.Pixel(-13, -30)
})
var markers = []
markers.push(marker)
map.remove(markers)
},
// 实例化点标记
addMarker(lnglatXY) {
if (t === 1) {
// console.log(lnglatXY)
marker = new AMap.Marker({
icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
position: lnglatXY,
offset: new AMap.Pixel(-13, -30),
// 设置是否可以拖拽
draggable: true,
cursor: 'move',
// 设置拖拽效果
raiseOnDrag: true
})
marker.setMap(map)
map.setFitView() // 执行定位
t++
}
// 修改标点位置
if (t !== 1) {
marker.setPosition(lnglatXY)
map.setCenter(lnglatXY)
marker.setMap(map)
map.setFitView() // 执行定位
}
},
// 填写地址
writeAddress(lnglatXY) {
var this2 = this
var geocoder = new AMap.Geocoder({
city: '重庆', // 城市，默认：“全国”
radius: 1000 // 范围，默认：500
})
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
var add = result.regeocode.formattedAddress
var arr = add.split('省')
if (arr.length > 1) {
arr = arr[1]
} else {
console.log('我不是直接的省')
arr = add.split('自治区')
// console.log(arr)
if (arr.length > 1) {
arr = arr[1]
} else {
arr = arr[0]
}
}
// console.log(arr)
this2.commitFrom.Address = arr
}
})
},
// 地址回调
geocoder_CallBack(data) {
// var address = data.city + data.district + data.street + data.streetNumber + data.township //返回地址描述
var address = data // 返回地址描述
this.commitFrom.Address = address
},
// 根据地址搜索
markLocation() {
var that = this
var address = that.commitFrom.Address
AMap.plugin('AMap.Geocoder', function() {
var geocoder = new AMap.Geocoder()
geocoder.getLocation(address, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
// 经纬度
var lon = result.geocodes[0].location.lng
var lat = result.geocodes[0].location.lat
that.commitFrom.Longitude = lon
that.commitFrom.Latitude = lat
lnglatXY = [lon, lat]
that.addMarker(lnglatXY)
} else {
console.log('定位失败！')
}
})
})
}
}
// 地图end
3.3 我的data
commitFrom: {
// 地图
Longitude: null,
Latitude: null,
Address: '郑州市'
}
如图:
这个是刚进入什么都没有的情况
Snipaste_2019-06-12_17-48-48.png
这个是点击地图之后的情况
Snipaste_2019-06-12_17-50-26.png
4.个性化地图的用法
4.1 在高德地图制作好自己的自定义样式 并生成链接
4.2 只需要添加mapStyle属性 ,属性值为你生成的链接即可
mounted() {
map = new AMap.Map('map-container', { // map-container为你地图容器的ID
resizeEnable: true,
zoom: 4,
center: [100.397428, 39.90923], // 初始化地图中心点
mapStyle: 'amap://styles/0f082e8cdcc5879e0ea84a6' // 此为你的账号生成的链接,这里只是例子
})
}
如图:
Snipaste_2019-06-12_17-50-59.png
