現(xiàn)在實(shí)現(xiàn)的業(yè)務(wù)是在地圖上用經(jīng)緯度顯示相應(yīng)的標(biāo)記點(diǎn)及數(shù)據(jù)（自定義標(biāo)記點(diǎn)），之前使用過(guò)高德地圖行政區(qū)域放大的api辛友，由于代碼量有點(diǎn)多就用了這個(gè)最近使用的自定義標(biāo)記點(diǎn)的示例來(lái)做展示黄琼，實(shí)現(xiàn)的方式都是一樣的琅轧。
高德地圖JS API：https://lbs.amap.com/api/javascript-api/guide/overlays/marker
這是示例中源代碼的效果圖鹊碍，紅框標(biāo)記就是自定義標(biāo)記點(diǎn)
而現(xiàn)在我想實(shí)現(xiàn)下圖的效果：
下面看一下他的源代碼，源代碼中province明顯是一個(gè)數(shù)組寸五，標(biāo)記點(diǎn)是通過(guò)遍歷這個(gè)數(shù)組的數(shù)據(jù)插入的，provinces[i].type === 2里面（"<div class = 'taiwan'>寶島臺(tái)灣</div>"）的就是我要做的自定義標(biāo)記點(diǎn)耿币，其實(shí)就是一個(gè)div梳杏，標(biāo)記點(diǎn)的自定義就是通過(guò)修改這個(gè)div實(shí)現(xiàn)的。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style type="text/css">
body,html,#container{
height: 100%;
margin: 0px;
font:12px Arial;
}
.taiwan{
border: solid 1px red;
color: red;
float: left;
width: 50px;
background-color: rgba(255,0,0,0.1)
}
</style>
<title>Marker example</title>
</head>
<body>
<div id="container" tabindex="0"></div>
<script src="https://webapi.amap.com/js/marker.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.2&key=608d75903d29ad471362f8c58c550daf"></script>
<script type="text/javascript">
var map = new AMap.Map('container',{resizeEnable: true,zoom:4});
var markers = []; //province見(jiàn)Demo引用的JS文件
for (var i = 0; i < provinces.length; i += 1) {
var marker;
if (provinces[i].type === 0) {
var icon = new AMap.Icon({
image: 'https://vdata.amap.com/icons/b18/1/2.png',
size: new AMap.Size(24, 24)
});
marker = new AMap.Marker({
icon: icon,
position: provinces[i].center.split(','),
offset: new AMap.Pixel(-12,-12),
zIndex: 101,
title: provinces[i].name,
map: map
});
} else {
marker = new AMap.Marker({
position: provinces[i].center.split(','),
title: provinces[i].name,
map: map
});
if (provinces[i].type === 2) {
var content= "<div class = 'taiwan'>寶島臺(tái)灣</div>";
baodao = new AMap.Marker({
content: content,
position: provinces[i].center.split(','),
title: provinces[i].name,
offset: new AMap.Pixel(0,0),
map: map
});
}
}
markers.push(marker);
}
map.setFitView();
</script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>
了解了源代碼實(shí)現(xiàn)過(guò)程淹接，現(xiàn)在是如何引入api十性，很多一開(kāi)始接觸相關(guān)業(yè)務(wù)時(shí)肯定會(huì)考慮vue的地圖插件vue-amap，我也試著去實(shí)現(xiàn)過(guò)塑悼，但是他的文檔實(shí)在是過(guò)于抽象也很難找到相應(yīng)示例（可能只有我找不到）蟹肘，對(duì)于很多初學(xué)者或者沒(méi)怎么接觸這方面業(yè)務(wù)的開(kāi)發(fā)者來(lái)說(shuō)這似乎有點(diǎn)不太好實(shí)現(xiàn)。了解了高德地圖的api后發(fā)現(xiàn)也不是不能實(shí)現(xiàn)张吉，源代碼是原生的那就用原生的方式實(shí)現(xiàn)晕城。
首先看看他引入的東西是啥：
//分別是：
<script src="https://webapi.amap.com/js/marker.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.2&key=608d75903d29ad471362f8c58c550daf"></script>
//還有
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
注冊(cè)賬號(hào)和申請(qǐng)key的過(guò)程如下：
1. 首先，注冊(cè)開(kāi)發(fā)者賬號(hào)郭怪，成為高德開(kāi)放平臺(tái)開(kāi)發(fā)者
2. 登陸之后支示，在進(jìn)入「應(yīng)用管理」 頁(yè)面「創(chuàng)建新應(yīng)用」
3. 為應(yīng)用添加 Key，「服務(wù)平臺(tái)」一項(xiàng)請(qǐng)選擇「 Web 端 ( JSAPI )」
通過(guò)異步的的方式引入：引入的方法后面可以封裝一下鄙才；只需要將provinces[i].type === 2里的內(nèi)容放入遍歷里面修改一下颂鸿。這樣基本的效果就是實(shí)現(xiàn)了，content的內(nèi)容可以根據(jù)業(yè)務(wù)自定義攒庵，后面可以根據(jù)業(yè)務(wù)需求進(jìn)行修改嘴纺。最后記得在destroyed中把引入的內(nèi)容清除。
async mounted() {
let that = this;
try{
await that.createMarker();
await that.createCoreScript()
await that.createDemo();
console.log('所有資源成功獲取...')
that.map = new AMap.Map('container', {
resizeEnable: true,
zoom:4
});
let markers = [];
let dataList [{ //dataList數(shù)據(jù)根據(jù)具體業(yè)務(wù)修改
lng: '',
lat: '',
name: '龍華'浓冒，
count: '25'
},{
lng: '',
lat: '',
name: '龍華'栽渴，
count: '25'
}]
for (var i = 0; i < that.dataList.length; i += 1) {
let marker;
let content= `<div id = 'taiwan'
style='display:flex;flex-direction: column;justify-content:center;align-items:center;color: #333;width: 80px; height:80px;border-radius:50%;text-align:center;background-color: #e2991a;font-weight:bold'
>
<div style='margin-bottom:6px'>${that.dataList[i].name}</div>
<div>${that.dataList[i].count}個(gè)樓盤</div>
</div>`;
marker = new AMap.Marker({
content: content,
position: [that.dataList[i].Lng,that.dataList[i].Lat],
title: that.dataList[i].name,
offset: new AMap.Pixel(0,0),
map: that.map
});
markers.push(marker);
}
} catch(e) {
console.log('資源獲取失敗')
}
},
destroyed() {
let coreScript = document.getElementById('coreScript');
let markerScript = document.getElementById('markerScript');
let demoScript = document.getElementById('demoScript');
coreScript.parentNode.removeChild(coreScript);
markerScript.parentNode.removeChild(markerScript);
demoScript.parentNode.removeChild(demoScript);
},
methods: {
createCoreScript() {
return new Promise((resolve, reject) => {
console.log('進(jìn)入加載核心資源')
let url = `http://webapi.amap.com/maps?v=1.4.2&key=${this.KEY}`;
let $script =document.createElement('script');
$script.id = 'coreScript';
$script.src = url;
$script.type = 'text/javascript';
$script.addEventListener('load', (event) => {
console.log('核心script 獲取成功')
resolve()
})
$script.onerror = function (e) {
console.log('js資源加載失敗了')
}
document.body.appendChild($script)
})
},
createMarker() {
return new Promise((resolve, reject) => {
let url = `http://webapi.amap.com/js/marker.js`;
let $script = document.createElement('script');
$script.id = 'markerScript';
$script.src = url;
$script.type = 'text/javascript';
$script.addEventListener('load', (event) => {
console.log('Marker script 獲取成功')
resolve()
})
document.body.appendChild($script)
})
},
createDemo() {
return new Promise((resolve, reject) => {
let url = `http://webapi.amap.com/demos/js/liteToolbar.js`;
let $script = document.createElement('script');
$script.id = 'demoScript';
$script.src = url;
$script.type = 'text/javascript';
$script.addEventListener('load', (event) => {
console.log('demo script 獲取成功')
resolve()
})
document.body.appendChild($script)
})
},
}
下面是完整基本實(shí)現(xiàn)的代碼：其他api的實(shí)現(xiàn)方法也一樣
<template>
<div class="container">
<div id="container"></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
map: '',
KEY: '', //將開(kāi)發(fā)者賬號(hào)申請(qǐng)的key放入
}
},
async mounted() {
let that = this;
try{
await that.createMarker();
await that.createCoreScript()
await that.createDemo();
console.log('所有資源成功獲取...')
that.map = new AMap.Map('container', {
resizeEnable: true,
zoom:4
});
let markers = [];
let dataList [{ //dataList數(shù)據(jù)根據(jù)具體業(yè)務(wù)修改
lng: '',
lat: '',
name: '龍華'，
count: '25'
},{
lng: '',
lat: '',
name: '龍華'稳懒，
count: '25'
}]
for (var i = 0; i < that.dataList.length; i += 1) {
let marker;
console.log(i)
let content= `<div id = 'taiwan'
style='display:flex;flex-direction: column;justify-content:center;align-items:center;color: #333;width: 80px; height:80px;border-radius:50%;text-align:center;background-color: #e2991a;font-weight:bold'
>
<div style='margin-bottom:6px'>${that.dataList[i].name}</div>
<div>${that.dataList[i].count}個(gè)樓盤</div>
</div>`;
marker = new AMap.Marker({
content: content,
position: [that.dataList[i].Lng,that.dataList[i].Lat],
title: that.dataList[i].name,
offset: new AMap.Pixel(0,0),
map: that.map
});
markers.push(marker);
}
} catch(e) {
console.log('資源獲取失敗')
}
},
destroyed() {
let coreScript = document.getElementById('coreScript');
let markerScript = document.getElementById('markerScript');
let demoScript = document.getElementById('demoScript');
coreScript.parentNode.removeChild(coreScript);
markerScript.parentNode.removeChild(markerScript);
demoScript.parentNode.removeChild(demoScript);
},
methods: {
async getData(){
const res = await this.$axios.get('/index/v1.index/find');
this.dataList = res.data;
},
createCoreScript() {
return new Promise((resolve, reject) => {
console.log('進(jìn)入加載核心資源')
let url = `http://webapi.amap.com/maps?v=1.4.2&key=${this.KEY}`;
let $script = document.createElement('script');
$script.id = 'coreScript';
$script.src = url;
$script.type = 'text/javascript';
$script.addEventListener('load', (event) => {
console.log('核心script 獲取成功')
resolve()
})
$script.onerror = function (e) {
console.log('js資源加載失敗了')
}
document.body.appendChild($script)
})
},
createMarker() {
return new Promise((resolve, reject) => {
let url = `http://webapi.amap.com/js/marker.js`;
let $script = document.createElement('script');
$script.id = 'markerScript';
$script.src = url;
$script.type = 'text/javascript';
$script.addEventListener('load', (event) => {
console.log('Marker script 獲取成功')
resolve()
})
document.body.appendChild($script)
})
},
createDemo() {
return new Promise((resolve, reject) => {
let url = `http://webapi.amap.com/demos/js/liteToolbar.js`;
let $script = document.createElement('script');
$script.id = 'demoScript';
$script.src = url;
$script.type = 'text/javascript';
$script.addEventListener('load', (event) => {
console.log('demo script 獲取成功')
resolve()
})
document.body.appendChild($script)
})
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container{
width: 100%;
height: 1000px;
margin: 0 auto;
#container{
height: 100%;
margin: 0px;
font:12px Arial;
}
.taiwan{
border: solid 1px rgb(223, 52, 52);
color: red;
float: left;
width: 50px;
background-color: rgba(228, 162, 40, 0.1);
background-color: #fff;
}
}
</style>
