uniapp微信小程序实现对地图多点或单点标记（@莫成尘）

最新推荐文章于 2025-06-09 12:17:27 发布

莫成尘

最新推荐文章于 2025-06-09 12:17:27 发布

阅读量4.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： UniApp 文章标签：微信小程序前端 uniapp uniapp小程序地图多点标注地图多点标注

本文链接：https://blog.csdn.net/weixin_47821281/article/details/113948879

先看代码，复制使用即可。您将看到以下效果：

版权属于莫成尘

注意：icon图标需要自行下载并替换，此外调用我本地的地图密钥可能有上线次数，请使用调试不要超过50次！如果无法出现效果请注意报错信息可能是调用上线 `请自行在高德地图申请密钥`

<template>
	<view class="box">
		<map name="" :markers="markers"></map>
	</view>
</template>

<script>
	export default {
   
   
		data() {
   
   
			return {
   
   
				addressA:"北京市昌平区", //标记点A 
				addressB:"天津市西青区", //标记点B  其他多点或单点请自行尝试
				list:[],
				markers:[
					{
   
    //标记点A 的信息
						iconPath: <