//Vue3
<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
import { onMounted } from "vue";
window._AMapSecurityConfig = {
securityJsCode: "「申请的安全密钥」",
};
var map = shallowRef(null);
//本地图标引入
import redMarker from "@/assets/icons/png/redMarker.png";
import greenMarker from "@/assets/icons/png/greenMarker.png";
import blueMarker from "@/assets/icons/png/blueMarker.png";
var initAMap = () => {
var opts = {
subdistrict: 0,
extensions: "all",
level: "city",
};
AMapLoader.load({
key: "myKey", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [
"AMap.Marker",
"AMap.DistrictSearch",
"AMap.Object3DLayer",
"AMap.Object3D",
"AMap.Icon",
"AMap.MassMarks",
// "AMap.createDefaultLayer",
], // 需要使用的的插件列表
})
.then((AMap) => {
var district = new AMap.DistrictSearch(opts);
district.search("中华人民共和国", function (status, result) {
var bounds = result.districtList[0].boundaries;
var mask = [];
for (var i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]]);
}
map = new AMap.Map("amapcontainer", {
mask: mask,
center: [102.602725, 34.076636],
disableSocket: true,
viewMode: "3D",
showLabel: false,
labelzIndex: 130,
pitch: 30,
zoom: 4.6,
zoomEnable: false, // 地图是否可缩放,默认值为true
dragEnable: false, // 地图是否可通过鼠标拖拽平移,默认为true
doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图,默认为true
mapStyle: "自定义地图样式",
});
//添加描边
for (var i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: "#8EECFF",
strokeWeight: 4,
map: map,
});
}
//添加标记
//红色标记,一级
var redIcon = new AMap.Icon({
size: new AMap.Size(22, 30), // 图标尺寸
image: redMarker, // Icon的图像,本地图标Vue引入
// imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量,适于雪碧图等
imageSize: new AMap.Size(22, 30), // 根据所设置的大小拉伸或压缩图片
});
const markerRed = new AMap.Marker({
position: new AMap.LngLat(116.39, 39.9),
// offset: new AMap.Pixel(-10, -10),
icon: redIcon,
label: {
content: "<div class='info'>北京科技股份有限公司</div>",
offset: new AMap.Pixel(-6, -30),
direction: "center",
},
});
map.add(markerRed);
//绿色标记,二级
var greenIcon = new AMap.Icon({
size: new AMap.Size(18, 24),
image: greenMarker,
imageSize: new AMap.Size(18, 24),
});
var markerGreenList = [
{
position: new AMap.LngLat(119.19, 35.2),
content:
"<div class='info'>淮坊智能装备研究院有限公司</div>",
},
{
position: new AMap.LngLat(118.59, 33.2),
content:
"<div class='info'>淮安智能网联创究院科技有限公司</div>",
},
];
//遍历添加Marker和Marker移入移除事件
for (let green of markerGreenList) {
let markerGreen = new AMap.Marker({
position: green.position,
icon: greenIcon,
label: {
content: green.content,
offset: new AMap.Pixel(-8, -30),
direction: "center",
},
});
map.add(markerGreen);
markerGreen.on("mouseover", showMarkerLabel);
markerGreen.on("mouseout", hideMarkerLabel);
}
//蓝色标记,三级和二级同理
var blueIcon = new AMap.Icon({
size: new AMap.Size(11, 13),
image: blueMarker,
imageSize: new AMap.Size(11, 13),
});
var markerBlueList = [
{
position: new AMap.LngLat(120.09, 31.53),
content: "<div class='info'>昆山技术有限公司</div>",
},
{
position: new AMap.LngLat(116.44, 38.62),
content:
"<div class='info'>超媒体信息技术有限公司</div>",
},
];
for (let blue of markerBlueList) {
let markerBlue = new AMap.Marker({
position: blue.position,
icon: blueIcon,
label: {
offset: new AMap.Pixel(-6, -27),
direction: "center",
content: blue.content,
},
});
map.add(markerBlue);
markerBlue.on("mouseover", showMarkerLabel);
markerBlue.on("mouseout", hideMarkerLabel);
}
markerRed.on("mouseover", showMarkerLabel);
markerRed.on("mouseout", hideMarkerLabel);
});
})
.catch((e) => {
console.log(e);
});
};
onMounted(() => {
initAMap();
});
</script>
自定义地图可以查看高德地图JS API自定义地图只显示中国地图_shsyzhzhgn的博客-CSDN博客
点标记自定义图标可以查看自定义图标-点标记-示例中心-JS API 示例 | 高德地图API
原文地址:https://blog.csdn.net/shsyzhzhgn/article/details/132260464
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_27980.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。