説明：マップに含まれている機能は次のとおりです。
- 見つけて自動的にテキストボックスに緯度と経度を取得するためにマップをクリック
- 緯度と経度が自動的にフォーカスを失った後、テキストボックスは、アドレスを入力し
index.htmlを導入1.
<!--引入高德地图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>
复制代码webpack.base.conf.jsの操作2.
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私のデータ
commitFrom: {
// 地图
Longitude: null,
Latitude: null,
Address: '郑州市'
}
复制代码アイコン：
これは、の状態をクリックする場合ではありません
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' // 此为你的账号生成的链接,这里只是例子
})
}
复制代码アイコン：
ます。https：//juejin.im/post/5d00d029e51d4510aa0114e9で再現