uniapp地图开发（APP，H5）
<template>
<view class="content">
<div id='container' class="map" :style="'height:' + maph + 'px;'"></div>
</view>
</template>
<script>
export default {
data() {
return {
maph: 0
}
},
onLoad() {
this.maph = uni.getSystemInfoSync().windowHeight
},
methods: {
}
}
</script>
<script module="renderJS" lang="renderjs">
var loadSdk = false; //是否已经加载完成地图sdk
export default {
data() {
return {
map: null
}
},
mounted() {
//这里安全码也是要自己申请
window._AMapSecurityConfig = {
securityJsCode:'you code',
}
if (typeof window.AMap == 'function') {
this.initAmap();
} else {
console.log('3333333333')
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script');
script.src = '/maps?v=2.0&key=you key';
script.onload = this.initAmap.bind(this);
document.head.appendChild(script);
}
},
methods: {
initAmap(e, ownerVm) {
//这里id必须跟模板中的容器id一样
var map = new AMap.Map("container", {
zoom: 12, //设置地图显示的缩放级别
center: [108.939621, 34.343147], //设置地图中心点坐标
//mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
viewMode: '2D' //设置地图模式
});
map.on('complete', () => {
console.log('加载完成')
})
map.plugin([""],function(){
var scale = new AMap.Scale();
map.addControl(scale);
});
map.plugin([""],function(){
//加载工具条
var tool = new AMap.ToolBar();
map.addControl(tool);
});
map.plugin([""],function() {
var controlBar = new AMap.ControlBar()
map.addControl(controlBar)
});
var styles = [{
url:"/jsapi_demos/static/images/",
size:new AMap.Size(32,32),
offset:new AMap.Pixel(-16,-32),
textColor: '#AACCFF'
},
{
url:"/jsapi_demos/static/images/",
size:new AMap.Size(32,32),
offset:new AMap.Pixel(-16,-32),
textColor: '#FFCE88'
},
{
url:"/jsapi_demos/static/images/",
size:new AMap.Size(32,32),
offset:new AMap.Pixel(-16,-32),
textColor:'#CC0066'
}];
var points = [
{lnglat: ["108.939621", "34.343147"] },
{lnglat: ["108.932621", "34.313145"] },
{lnglat: ["109.932621", "33.313147"] },
{lnglat: ["109.132621", "33.913149"] },
{lnglat: ["108.122621", "35.213148"] },
{lnglat: ["109.522621", "34.013147"] },
{lnglat: ["108.567621", "35.456127"] },
{lnglat: ["107.212621", "33.953137"] },
{lnglat: ["108.182621", "35.299147"] },
{lnglat: ["109.900621", "34.209167"] },
{lnglat: ["108.000521", "33.099014"] },
];
var cluster
// 加载点聚合插件
AMap.plugin([""], function() {
if (cluster) {
cluster.setMap(null);
}
cluster = new AMap.MarkerCluster(map, points, {
//gridSize: 80, // 聚合网格像素大小
styles: styles,
renderMarker: (content) => {
let icon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(32, 32),
// 图标的取图地址
image: './static/',
// 图标所用图片大小
imageSize: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -32),
});
content.marker.setIcon(icon);
content.marker.setDraggable(true)
content.marker.on("dragend", res => {
console.log('dragend',res.lnglat)
})
let label = {
content: `<div style="display: flex;flex-direction: row;align-items: center;background: yellow;position:relative;margin:0;top:0;right:0;min-width:0;">
<div style="padding: 3px 10px 3px 10px;background-color: aquamarine;border-radius: 8px;margin-right: 10px;">是的发送到</div>
<div>水电费水电费</div>
</div>`,
direction: 'top'
}
content.marker.setLabel(label)
content.marker.on('click', ev => {
map.setZoomAndCenter(16, ev.target.getPosition());
})
},
//配置此回调函数，上面配置的styles会失效
renderClusterMarker: (context) => {
context.marker.setOffset(new AMap.Pixel(-20, -40))
context.marker.setContent(`<div style='background:red;color:white;border-radius: 50%;width:40px;height:40px;text-align:center;line-height:40px;'>${context.count}</div>`);
}
});
cluster.on('click', (item) => {
//此处是通过包含点的数量判断是否是聚合点，不是聚合点就执行上方单个点的点击方式
if (item.clusterData.length <= 1) {
return;
}
//这里是计算所有聚合点的中心点
let alllng = 0,
alllat = 0;
for (const mo of item.clusterData) {
alllng += mo.lnglat.lng;
alllat += mo.lnglat.lat;
}
const lat = alllat / item.clusterData.length;
const lng = alllng / item.clusterData.length;
//这里是放大地图，此处写死了每次点击放大的级别，可以根据点的数量和当前大小适应放大，体验更佳
var lnglat = new AMap.LngLat(lng, lat);
map.setZoomAndCenter(map.getZoom() + 4, lnglat);
});
});
//加载地理编码插件
AMap.plugin([""], () => { //加载地理编码插件
console.log('00000000000')
var geocoder = new AMap.Geocoder({
city: '010' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
})
var address = '北京市海淀区苏州街';
geocoder.getLocation(address, function(status, result) {
console.log('9999999999999',result,status)
if (status === 'complete' && result.info === 'OK') {
// result中对应详细地理坐标信息
}
})
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.map {
z-index: 1;
width: 750rpx;
}
.second {
position: absolute;
right: 0;
bottom: 0;
z-index: 9;
}
.amap-marker-label{
position: absolute;
z-index: 2;
border: 1px solid transparent;
background-color: #e5e5e5;
cursor: default;
padding: 3px;
font-size: 12px;
line-height: 14px;
border-radius: 10px;
}
.test {
display: flex;
flex-direction: row;
align-items: center;
background: yellow;
}
.test1 {
padding: 3px 10px 3px 10px;
background-color: aquamarine;
border-radius: 8px;
margin-right: 10px;
}
</style>