介紹: 該地圖包含功能有:
- 點擊地圖自動獲取定位和經(jīng)緯度到文本框
- 文本框輸入地址 失去焦點后自動獲得經(jīng)緯度
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" />
</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 導(dǎo)入
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() { // 回調(diào)函數(shù)
})
// 加載搜索列表
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("回顯坐標(biāo)")
if (mlon && mlat) {
// removeMarkers(lnglatXY)
lnglatXY = [mlon, mlat]
this1.addMarker(lnglatXY)
}
},
// 移除之前的標(biāo)點
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)
},
// 實例化點標(biāo)記
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),
// 設(shè)置是否可以拖拽
draggable: true,
cursor: 'move',
// 設(shè)置拖拽效果
raiseOnDrag: true
})
marker.setMap(map)
map.setFitView() // 執(zhí)行定位
t++
}
// 修改標(biāo)點位置
if (t !== 1) {
marker.setPosition(lnglatXY)
map.setCenter(lnglatXY)
marker.setMap(map)
map.setFitView() // 執(zhí)行定位
}
},
// 填寫地址
writeAddress(lnglatXY) {
var this2 = this
var geocoder = new AMap.Geocoder({
city: '重慶', // 城市，默認(rèn)：“全國”
radius: 1000 // 范圍脐恩，默認(rèn)：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('自治區(qū)')
// console.log(arr)
if (arr.length > 1) {
arr = arr[1]
} else {
arr = arr[0]
}
}
// console.log(arr)
this2.commitFrom.Address = arr
}
})
},
// 地址回調(diào)
geocoder_CallBack(data) {
// var address = data.city + data.district + data.street + data.streetNumber + data.township //返回地址描述
var address = data // 返回地址描述
this.commitFrom.Address = address
},
// 根據(jù)地址搜索
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') {
// 經(jīng)緯度
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: '鄭州市'
}
如圖:
這個是剛進(jìn)入什么都沒有的情況
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
