先看效果
地图中的标记点 可以动态变化自定义的图片与内容
原理
通过map组件中的 markers 属性 设置标记点 用于在地图上显示标记的位置
map组件所在uniapp官网位置：map-uni-app https://uniapp.dcloud.io/component/map
1、想要动态改变标记点图标 必须把默认的标记点覆盖，用到了markers参数下的 iconPath设置标记点的图标，如果需求只需要简单的动态改变标记点的图标到这一步就结束了，但是如果需要动态改变标记点图标及内容(动态显示文字)就需要看下一步！
2、把iconPath设置的图片改用一张1*1像素的透明背景图 png格式的。
3、markers 列表中的 customCallout 设置自定义气泡窗口 display: "ALWAYS"总数显示,并在标签内配置 slot="callout"这里注意的是 要比map组件层级高 必须使用 cover-view 或者 cover-image 标签;
<!-- 自定义窗口 -->
<cover-view slot="callout">
<template v-for="(item,index) in markers">
<cover-view :marker-id="item.id" :key='index'>
<cover-view class="position-relative" style="width: 92rpx; height: 78rpx;">
<cover-image class="position-absolute" style="width: 92rpx; height: 78rpx;" :src='item.options.iconPath'></cover-image>
<cover-view style="top: 13rpx; left: 45rpx; width: 30rpx; height: 30rpx;"
class="border bg-white rounded-circle flex align-center justify-center position-absolute">
<cover-view>{{item.options.labelName}}</cover-view>
</cover-view>
</cover-view>
</cover-view>
</template></cover-view>
4、map标签上使用 @callouttap事件 点击标记点对应的气泡时触发,这样就可以动态获取标记点信息了。
<map id="map" ref="map" style="height: 870rpx; width: 750rpx;" :latitude="latitude" :longitude="longitude" :markers="markers" :enable-building='true'
:show-location='true' :circles='circles' @markertap='markertap' @callouttap='callouttap'></map>- 1
- 2
其中、第二步中使用透明背景图把默认标记点隐藏，第三步把自定义气泡弹窗改为标记点，偏移量自行微调到原标记点上方，第四步，获取到点击标记点的回调。这样，就可以实现动态改变标记点图标及内容了。
附上代码(样式缺失,自行修改)
<template>
<view>
<!-- <nav-bar bgColor="#4f8fef" fontColor="#fff" title="地图" :titleCenter='true'></nav-bar>
<free-scroll-main :scrollView='false' :showTabber="false" scrollViewStyle="background-color: #fafaf9;">
<span ><</span><span >/</span>free<span >-</span>scroll<span >-</span>main<span >></span> <span >--</span><span >></span>
<span ><</span>view <span >class</span><span >=</span><span >"bg-dark"</span> style<span >=</span><span >"height: 870rpx; width: 750rpx;"</span><span >></span>
<span ><</span>map id<span >=</span><span >"map"</span> ref<span >=</span><span >"map"</span> style<span >=</span><span >"height: 870rpx; width: 750rpx;"</span> <span >:</span>latitude<span >=</span><span >"latitude"</span> <span >:</span>longitude<span >=</span><span >"longitude"</span> <span >:</span>markers<span >=</span><span >"markers"</span> <span >:</span>enable<span >-</span>building<span >=</span><span >'true'</span>
<span >:</span>show<span >-</span>location<span >=</span><span >'true'</span> <span >:</span>circles<span >=</span><span >'circles'</span> @markertap<span >=</span><span >'markertap'</span> @callouttap<span >=</span><span >'callouttap'</span><span >></span>
<span ><</span><span >!</span><span >--</span> 自定义窗口 <span >--</span><span >></span>
<span ><</span>cover<span >-</span>view slot<span >=</span><span >"callout"</span><span >></span>
<span ><</span>template v<span >-</span><span >for</span><span >=</span><span >"(item,index) in markers"</span><span >></span>
<span ><</span>cover<span >-</span>view <span >:</span>marker<span >-</span>id<span >=</span><span >"item.id"</span> <span >:</span>key<span >=</span><span >'index'</span><span >></span>
<span ><</span>cover<span >-</span>view <span >class</span><span >=</span><span >"position-relative"</span> style<span >=</span><span >"width: 92rpx; height: 78rpx;"</span><span >></span>
<span ><</span>cover<span >-</span>image <span >class</span><span >=</span><span >"position-absolute"</span> style<span >=</span><span >"width: 92rpx; height: 78rpx;"</span> <span >:</span>src<span >=</span><span >'item.options.iconPath'</span><span >></span><span ><</span><span >/</span>cover<span >-</span>image<span >></span>
<span ><</span>cover<span >-</span>view style<span >=</span><span >"top: 13rpx; left: 45rpx; width: 30rpx; height: 30rpx;"</span>
<span >class</span><span >=</span><span >"border bg-white rounded-circle flex align-center justify-center position-absolute"</span><span >></span>
<span ><</span>cover<span >-</span>view<span >></span><span >{<!-- --></span><span >{<!-- --></span>item<span >.</span>options<span >.</span>labelName<span >}</span><span >}</span><span ><</span><span >/</span>cover<span >-</span>view<span >></span>
<span ><</span><span >/</span>cover<span >-</span>view<span >></span>
<span ><</span><span >/</span>cover<span >-</span>view<span >></span>
<span ><</span><span >/</span>cover<span >-</span>view<span >></span>
<span ><</span><span >/</span>template<span >></span>
<span ><</span><span >/</span>cover<span >-</span>view<span >></span>
<span ><</span><span >/</span>map<span >></span>
<span ><</span><span >/</span>view<span >></span>
<span ><</span>view <span >class</span><span >=</span><span >"mt-5 flex align-center justify-center"</span><span >></span>
<span ><</span>view <span >class</span><span >=</span><span >"position-relative border bg-white rounded-10"</span> style<span >=</span><span >" width: 650rpx; height: 220rpx;"</span><span >></span>
<span ><</span>view <span >:</span>style<span >=</span><span >"getBgColor"</span> <span >class</span><span >=</span><span >"position-absolute rounded-circle flex align-center justify-center"</span>
style<span >=</span><span >"width: 60rpx; height: 60rpx; top: -30rpx; left: 30rpx;"</span><span >></span>
<span ><</span>text <span >class</span><span >=</span><span >"text-white"</span> style<span >=</span><span >"font-size: 24rpx;"</span><span >></span><span >{<!-- --></span><span >{<!-- --></span>targetInfo<span >.</span>labelName<span >}</span><span >}</span><span ><</span><span >/</span>text<span >></span>
<span ><</span><span >/</span>view<span >></span>
<span ><</span>view <span >class</span><span >=</span><span >" pt-3 px-3 flex align-center justify-between"</span><span >></span>
<span ><</span>view <span >class</span><span >=</span><span >"flex flex-column"</span><span >></span>
<span ><</span>text <span >class</span><span >=</span><span >"font-md font-weight-bolder"</span><span >></span><span >{<!-- --></span><span >{<!-- --></span>targetInfo<span >.</span>locationName<span >}</span><span >}</span><span ><</span><span >/</span>text<span >></span>
<span ><</span>text <span >class</span><span >=</span><span >"font-sm pt-1"</span><span >></span><span >{<!-- --></span><span >{<!-- --></span>targetInfo<span >.</span>address<span >}</span><span >}</span><span ><</span><span >/</span>text<span >></span>
<span ><</span>text <span >class</span><span >=</span><span >"font-sm py-1"</span><span >></span><span >{<!-- --></span><span >{<!-- --></span>targetInfo<span >.</span>city<span >}</span><span >}</span><span ><</span><span >/</span>text<span >></span>
<span ><</span>text <span >class</span><span >=</span><span >"font-sm"</span><span >></span><span >{<!-- --></span><span >{<!-- --></span>targetInfo<span >.</span>phoneNumber<span >}</span><span >}</span><span ><</span><span >/</span>text<span >></span>
<span ><</span><span >/</span>view<span >></span>
<span ><</span>view <span >class</span><span >=</span><span >"flex flex-column"</span><span >></span>
<span ><</span>u<span >-</span>button <span >class</span><span >=</span><span >"btn mb-4"</span> type<span >=</span><span >"primary"</span><span >></span>预约<span ><</span><span >/</span>u<span >-</span>button<span >></span>
<span ><</span>u<span >-</span>button @click<span >=</span><span >"openMap"</span> <span >class</span><span >=</span><span >"btn"</span> type<span >=</span><span >"primary"</span><span >></span>导航<span ><</span><span >/</span>u<span >-</span>button<span >></span>
<span ><</span><span >/</span>view<span >></span>
<span ><</span><span >/</span>view<span >></span>
<span ><</span><span >/</span>view<span >></span>
<span ><</span><span >/</span>view<span >></span>
<span ><</span><span >/</span>view<span >></span></template>
<script>
import Map from ‘@/common/js/openMap.js’<span >export</span> <span >default</span> <span >{<!-- --></span>
components<span >:</span> <span >{<!-- --></span><span >}</span><span >,</span>
<span class="token function">data</span><span >(</span><span >)</span> <span >{<!-- --></span>
<span >return</span> <span >{<!-- --></span>
<span class="token comment">// 圆球颜色</span>
color<span >:</span> <span >[</span><span >'#0797e4'</span><span >,</span> <span >'#2be4ae'</span><span >]</span><span >,</span>
<span class="token comment">// 定位维度</span>
latitude<span >:</span> <span >22.26666</span><span >,</span>
<span class="token comment">// 定位经度</span>
longitude<span >:</span> <span >113.54342</span><span >,</span>
<span class="token comment">// 点击选中id</span>
checkedId<span >:</span> <span >0</span><span >,</span>
<span class="token comment">// 选中marker列表下标</span>
markerIndex<span >:</span> <span >-</span><span >1</span><span >,</span>
<span class="token comment">// 点击获取到的标点信息</span>
targetInfo<span >:</span> <span >{<!-- --></span>
labelName<span >:</span> <span >'A'</span><span >,</span>
locationName<span >:</span> <span >'嘉苑'</span><span >,</span>
address<span >:</span> <span >'情侣路公交亭'</span><span >,</span>
city<span >:</span> <span >'珠海'</span><span >,</span>
phoneNumber<span >:</span> <span >'(0123)119119119'</span><span >,</span>
latitude<span >:</span> <span >22.26666</span><span >,</span>
longitude<span >:</span> <span >113.54342</span><span >,</span>
<span >}</span><span >,</span>
<span class="token comment">// 标点列表</span>
markers<span >:</span> <span >[</span>
<span class="token comment">// {<!-- --></span>
<span class="token comment">// id: 1, //标记点id</span>
<span class="token comment">// clusterId: 1, //自定义点聚合簇效果时使用</span>
<span class="token comment">// title: '选中',</span>
<span class="token comment">// latitude: 22.26666, //维度</span>
<span class="token comment">// longitude: 113.54342, //经度</span>
<span class="token comment">// alpha: 1, //透明度 0-1</span>
<span class="token comment">// iconPath: '/static/images/map/none.png',</span>
<span class="token comment">// options: {<!-- --></span>
<span class="token comment">// checked: true,</span>
<span class="token comment">// iconPath: '/static/images/map/select.png',</span>
<span class="token comment">// labelName: 'A',</span>
<span class="token comment">// locationName: '嘉苑',</span>
<span class="token comment">// address: '高新区大学路101号',</span>
<span class="token comment">// city: '珠海',</span>
<span class="token comment">// phoneNumber: '(0123)119119119'</span>
<span class="token comment">// },</span>
<span class="token comment">// // 自定义窗口</span>
<span class="token comment">// customCallout: {<!-- --></span>
<span class="token comment">// anchorX: -1,</span>
<span class="token comment">// anchorY: 46,</span>
<span class="token comment">// display: "ALWAYS"</span>
<span class="token comment">// },</span>
<span class="token comment">// },</span>
<span >]</span><span >,</span>
<span class="token comment">// 是否显示圆</span>
circles<span >:</span> <span >[</span><span >{<!-- --></span>
latitude<span >:</span> <span >22.26666</span><span >,</span>
longitude<span >:</span> <span >113.54342</span><span >,</span>
color<span >:</span> <span >'#2979ffcc'</span><span >,</span>
fillColor<span >:</span> <span >'#2979ff61'</span><span >,</span>
strokeWidth<span >:</span> <span >1</span><span >,</span>
radius<span >:</span> <span >500</span><span >,</span>
<span >}</span><span >]</span><span >,</span>
<span class="token comment">// 控件</span>
controls<span >:</span> <span >[</span>
<span >]</span>
<span >}</span>
<span >}</span><span >,</span>
watch<span >:</span> <span >{<!-- --></span>
<span class="token comment">// 监听选中下标 改变图片 </span>
<span class="token function">markerIndex</span><span >(</span><span class="token parameter">val<span >,</span> oldVal</span><span >)</span> <span >{<!-- --></span>
<span >this</span><span >.</span>markers<span >[</span>val<span >]</span><span >.</span>options<span >.</span>iconPath <span >=</span> <span >'/static/images/map/none.png'</span>
<span >this</span><span >.</span>markers<span >[</span>val<span >]</span><span >.</span>options<span >.</span>iconPath <span >=</span> <span >'/static/images/map/select.png'</span><span >;</span>
<span >if</span> <span >(</span><span >this</span><span >.</span>markers<span >[</span>oldVal<span >]</span><span >)</span> <span >{<!-- --></span>
<span >this</span><span >.</span>markers<span >[</span>oldVal<span >]</span><span >.</span>options<span >.</span>iconPath <span >=</span> <span >'/static/images/map/noselect.png'</span><span >;</span>
<span >}</span>
console<span >.</span><span class="token function">log</span><span >(</span>val<span >,</span> oldVal<span >)</span><span >;</span>
<span >}</span>
<span >}</span><span >,</span>
computed<span >:</span> <span >{<!-- --></span>
<span class="token function">getBgColor</span><span >(</span><span >)</span> <span >{<!-- --></span>
<span >return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span >background-image: linear-gradient(90deg, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span><span >this</span><span >.</span>color<span >[</span><span >0</span><span >]</span><span class="token interpolation-punctuation punctuation">}</span></span><span >, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span><span >this</span><span >.</span>color<span >[</span><span >1</span><span >]</span><span class="token interpolation-punctuation punctuation">}</span></span><span >);</span><span class="token template-punctuation string">`</span></span>
<span >}</span>
<span >}</span><span >,</span>
<span class="token function">created</span><span >(</span><span >)</span> <span >{<!-- --></span>
<span >this</span><span >.</span><span class="token function">isGetLocation</span><span >(</span><span >)</span><span >;</span>
<span >}</span><span >,</span>
methods<span >:</span> <span >{<!-- --></span>
<span class="token comment">// 测试</span>
<span class="token function">ceshi</span><span >(</span><span >)</span> <span >{<!-- --></span>
<span >for</span> <span >(</span><span >let</span> i <span >=</span> <span >0</span><span >;</span> i <span ><</span> <span >5</span><span >;</span> i<span >++</span><span >)</span> <span >{<!-- --></span>
<span >let</span> obj <span >=</span> <span >{<!-- --></span>
id<span >:</span> <span >1</span><span >,</span> <span class="token comment">//标记点id</span>
clusterId<span >:</span> <span >1</span><span >,</span> <span class="token comment">//自定义点聚合簇效果时使用</span>
title<span >:</span> <span >'选中'</span><span >,</span>
latitude<span >:</span> <span >22.26666</span><span >,</span> <span class="token comment">//维度</span>
longitude<span >:</span> <span >113.54342</span><span >,</span> <span class="token comment">//经度</span>
alpha<span >:</span> <span >1</span><span >,</span> <span class="token comment">//透明度 0-1</span>
iconPath<span >:</span> <span >'/static/images/map/none.png'</span><span >,</span>
options<span >:</span> <span >{<!-- --></span>
iconPath<span >:</span> <span >'/static/images/map/noselect.png'</span><span >,</span>
labelName<span >:</span> <span >'A'</span><span >,</span>
locationName<span >:</span> <span >'嘉苑'</span><span >,</span>
address<span >:</span> <span >'高新区大学路101号'</span><span >,</span>
city<span >:</span> <span >'珠海'</span><span >,</span>
phoneNumber<span >:</span> <span >'(0123)119119119'</span>
<span >}</span><span >,</span>
<span class="token comment">// 自定义窗口</span>
customCallout<span >:</span> <span >{<!-- --></span>
anchorX<span >:</span> <span >-</span><span >1</span><span >,</span>
anchorY<span >:</span> <span >46</span><span >,</span>
display<span >:</span> <span >"ALWAYS"</span>
<span >}</span><span >,</span>
<span >}</span>
<span >let</span> start <span >=</span> <span >this</span><span >.</span>markers<span >.</span>length<span >;</span>
obj<span >.</span>id <span >=</span> start<span >;</span>
obj<span >.</span>clusterId <span >=</span> start<span >;</span>
obj<span >.</span>options<span >.</span>labelName <span >=</span> String<span >.</span><span class="token function">fromCharCode</span><span >(</span><span >65</span> <span >+</span> start<span >)</span> <span class="token comment">// A</span>
<span >this</span><span >.</span>markers<span >.</span><span class="token function">push</span><span >(</span>obj<span >)</span><span >;</span>
<span >}</span>
<span >this</span><span >.</span>markers<span >.</span><span class="token function">forEach</span><span >(</span><span >(</span><span class="token parameter">item<span >,</span> index</span><span >)</span> <span >=></span> <span >{<!-- --></span>
<span >let</span> timer <span >=</span> <span class="token function">setTimeout</span><span >(</span><span >(</span><span >)</span> <span >=></span> <span >{<!-- --></span>
<span >let</span> suiji <span >=</span> Math<span >.</span><span class="token function">round</span><span >(</span>Math<span >.</span><span class="token function">random</span><span >(</span><span >)</span> <span >*</span> <span >10</span><span >)</span> <span >*</span> <span >0.0003</span><span >;</span>
<span >if</span> <span >(</span>Math<span >.</span><span class="token function">round</span><span >(</span>Math<span >.</span><span class="token function">random</span><span >(</span><span >)</span> <span >*</span> <span >5</span><span >)</span> <span >></span> <span >2</span><span >)</span> <span >{<!-- --></span>
suiji <span >=</span> <span >-</span>suiji<span >;</span>
<span >}</span>
<span >if</span> <span >(</span>index <span >%</span> <span >2</span> <span >!=</span> <span >0</span><span >)</span> <span >{<!-- --></span>
<span >this</span><span >.</span>markers<span >[</span>index<span >]</span><span >.</span>longitude <span >=</span> <span >this</span><span >.</span>longitude <span >+</span> suiji<span >;</span>
<span >this</span><span >.</span>markers<span >[</span>index<span >]</span><span >.</span>latitude <span >=</span> <span >this</span><span >.</span>latitude <span >+</span> suiji<span >;</span>
<span >}</span> <span >else</span> <span >{<!-- --></span>
<span >this</span><span >.</span>markers<span >[</span>index<span >]</span><span >.</span>longitude <span >=</span> <span >this</span><span >.</span>longitude <span >+</span> suiji<span >;</span>
<span >this</span><span >.</span>markers<span >[</span>index<span >]</span><span >.</span>latitude <span >=</span> <span >this</span><span >.</span>latitude <span >-</span> suiji<span >;</span>
<span >}</span>
console<span >.</span><span class="token function">log</span><span >(</span>suiji<span >)</span><span >;</span>
<span class="token function">clearTimeout</span><span >(</span>timer<span >)</span><span >;</span>
timer <span >=</span> <span >null</span><span >;</span>
<span >}</span><span >,</span> <span >50</span> <span >*</span> index<span >)</span>
<span >}</span><span >)</span>
<span class="token function">setTimeout</span><span >(</span><span >(</span><span >)</span> <span >=></span> <span >{<!-- --></span>
<span >this</span><span >.</span><span class="token function">getTargetInfo</span><span >(</span><span >this</span><span >.</span>markers<span >[</span><span >0</span><span >]</span><span >)</span><span >;</span>
<span >}</span><span >,</span> <span >1500</span><span >)</span>
<span >}</span><span >,</span>
<span class="token function">getTargetInfo</span><span >(</span><span class="token parameter">obj</span><span >)</span> <span >{<!-- --></span>
<span >this</span><span >.</span>targetInfo<span >.</span>labelName <span >=</span> obj<span >.</span>options<span >.</span>labelName<span >;</span>
<span >this</span><span >.</span>targetInfo<span >.</span>locationName <span >=</span> obj<span >.</span>options<span >.</span>locationName<span >;</span>
<span >this</span><span >.</span>targetInfo<span >.</span>address <span >=</span> obj<span >.</span>options<span >.</span>address<span >;</span>
<span >this</span><span >.</span>targetInfo<span >.</span>phoneNumber <span >=</span> obj<span >.</span>options<span >.</span>phoneNumber<span >;</span>
<span >this</span><span >.</span>targetInfo<span >.</span>longitude <span >=</span> obj<span >.</span>longitude<span >;</span>
<span >this</span><span >.</span>targetInfo<span >.</span>latitude <span >=</span> obj<span >.</span>latitude<span >;</span>
<span >}</span><span >,</span>
<span class="token comment">// 点击标记点</span>
<span class="token function">markertap</span><span >(</span><span class="token parameter">e</span><span >)</span> <span >{<!-- --></span>
console<span >.</span><span class="token function">log</span><span >(</span>e<span >,</span> <span >'标记点e'</span><span >)</span><span >;</span>
<span >}</span><span >,</span>
<span class="token comment">// 点击自定义气泡</span>
<span class="token function">callouttap</span><span >(</span><span class="token parameter">e</span><span >)</span> <span >{<!-- --></span>
<span >this</span><span >.</span>checkedId <span >=</span> e<span >.</span>detail<span >.</span>markerId<span >;</span>
<span >let</span> markerId <span >=</span> e<span >.</span>detail<span >.</span>markerId<span >;</span>
<span >for</span> <span >(</span><span >let</span> i <span >=</span> <span >0</span><span >;</span> i <span ><</span> <span >this</span><span >.</span>markers<span >.</span>length<span >;</span> i<span >++</span><span >)</span> <span >{<!-- --></span>
<span >if</span> <span >(</span><span >this</span><span >.</span>markers<span >[</span>i<span >]</span><span >.</span>id <span >==</span> markerId<span >)</span> <span >{<!-- --></span>
<span >this</span><span >.</span>markerIndex <span >=</span> i<span >;</span>
<span >break</span><span >;</span>
<span >}</span>
<span >}</span>
<span >if</span> <span >(</span><span >this</span><span >.</span>markerIndex <span >!=</span> <span >-</span><span >1</span><span >)</span> <span >{<!-- --></span>
<span >this</span><span >.</span><span class="token function">getTargetInfo</span><span >(</span><span >this</span><span >.</span>markers<span >[</span><span >this</span><span >.</span>markerIndex<span >]</span><span >)</span><span >;</span>
<span >}</span> <span >else</span> <span >{<!-- --></span>
uni<span >.</span><span class="token function">showToast</span><span >(</span><span >{<!-- --></span>
title<span >:</span> <span >'暂未该设备信息'</span><span >,</span>
<span >}</span><span >)</span>
<span >}</span>
<span >}</span><span >,</span>
<span class="token comment">// 打开地图导航</span>
<span class="token function">openMap</span><span >(</span><span >)</span> <span >{<!-- --></span>
console<span >.</span><span class="token function">log</span><span >(</span><span >'uni.getSystemInfoSync().platform'</span><span >,</span> uni<span >.</span><span class="token function">getSystemInfoSync</span><span >(</span><span >)</span><span >.</span>platform<span >)</span><span >;</span>
console<span >.</span><span class="token function">log</span><span >(</span><span >this</span><span >.</span>targetInfo<span >.</span>latitude<span >,</span> <span >this</span><span >.</span>targetInfo<span >.</span>longitude<span >)</span><span >;</span>
<span class="token comment">// Map.openMap(this.targetInfo.latitude, this.targetInfo.longitude, this.targetInfo.locationName, 'wgs84')</span>
<span >var</span> options <span >=</span> <span >{<!-- --></span>
origin<span >:</span> <span >{<!-- --></span> <span class="token comment">//导航起点坐标和名称,如果不传则起点为当前位置</span>
latitude<span >:</span> <span >this</span><span >.</span>latitude<span >,</span>
longitude<span >:</span> <span >this</span><span >.</span>longitude<span >,</span>
name<span >:</span> <span >"起点"</span>
<span >}</span><span >,</span>
destination<span >:</span> <span >{<!-- --></span> <span class="token comment">//导航终点点坐标和名称</span>
latitude<span >:</span> <span >this</span><span >.</span>targetInfo<span >.</span>latitude<span >,</span>
longitude<span >:</span> <span >this</span><span >.</span>targetInfo<span >.</span>longitude<span >,</span>
name<span >:</span> <span >this</span><span >.</span>targetInfo<span >.</span>locationName
<span >}</span><span >,</span>
<span class="token comment">// #ifdef MP-WEIXIN</span>
mapId<span >:</span> <span >"map"</span><span >,</span>
<span class="token comment">// #endif</span>
mode<span >:</span> <span >"drive"</span> <span class="token comment">//导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike;</span>
<span >}</span>
<span class="token comment">//路线规划</span>
Map<span >.</span><span class="token function">routePlan</span><span >(</span>options<span >,</span> <span >"gcj02"</span><span >)</span>
<span class="token comment">//驾车导航，打开地图直接开启导航，只需要传入options.destination终点信息</span>
Map<span >.</span><span class="token function">navigation</span><span >(</span>options<span >,</span> <span >"gcj02"</span><span >)</span>
<span >}</span><span >,</span>
<span class="token comment">// 获取定位信息</span>
<span class="token function">getLocationInfo</span><span >(</span><span >)</span> <span >{<!-- --></span>
uni<span >.</span><span class="token function">getLocation</span><span >(</span><span >{<!-- --></span>
type<span >:</span> <span >'gcj02'</span><span >,</span> <span class="token comment">//gcj02国测局坐标</span>
<span class="token function-variable function">success</span><span >:</span> <span >(</span><span class="token parameter">res</span><span >)</span> <span >=></span> <span >{<!-- --></span>
console<span >.</span><span class="token function">log</span><span >(</span><span >'当前位置的经度：'</span> <span >+</span> res<span >.</span>longitude<span >)</span><span >;</span>
console<span >.</span><span class="token function">log</span><span >(</span><span >'当前位置的纬度：'</span> <span >+</span> res<span >.</span>latitude<span >)</span><span >;</span>
<span >this</span><span >.</span>longitude <span >=</span> res<span >.</span>longitude<span >;</span>
<span >this</span><span >.</span>latitude <span >=</span> res<span >.</span>latitude<span >;</span>
<span >this</span><span >.</span>circles<span >[</span><span >0</span><span >]</span><span >.</span>longitude <span >=</span> res<span >.</span>longitude<span >;</span>
<span >this</span><span >.</span>circles<span >[</span><span >0</span><span >]</span><span >.</span>latitude <span >=</span> res<span >.</span>latitude<span >;</span>
<span >this</span><span >.</span><span class="token function">ceshi</span><span >(</span><span >)</span><span >;</span>
<span >}</span>
<span >}</span><span >)</span><span >;</span>
<span >}</span><span >,</span>
<span class="token comment">// 获取定位授权</span>
<span class="token function">getAuthorizeInfo</span><span >(</span>a <span >=</span> <span >"scope.userLocation"</span><span >)</span> <span >{<!-- --></span> <span class="token comment">//1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗</span>
<span >var</span> _this <span >=</span> <span >this</span><span >;</span>
uni<span >.</span><span class="token function">authorize</span><span >(</span><span >{<!-- --></span>
scope<span >:</span> a<span >,</span>
<span class="token function">success</span><span >(</span><span >)</span> <span >{<!-- --></span> <span class="token comment">//1.1 允许授权</span>
_this<span >.</span><span class="token function">getLocationInfo</span><span >(</span><span >)</span><span >;</span>
<span >}</span><span >,</span>
<span class="token function">fail</span><span >(</span><span >)</span> <span >{<!-- --></span> <span class="token comment">//1.2 拒绝授权</span>
console<span >.</span><span class="token function">log</span><span >(</span><span >"你拒绝了授权，无法获得周边信息"</span><span >)</span>
<span >}</span>
<span >}</span><span >)</span>
<span >}</span><span >,</span>
<span class="token comment">// 查看是否已经授权定位</span>
<span class="token function">isGetLocation</span><span >(</span>a <span >=</span> <span >"scope.userLocation"</span><span >)</span> <span >{<!-- --></span> <span class="token comment">// 3. 检查当前是否已经授权访问scope属性，</span>
<span >var</span> _this <span >=</span> <span >this</span><span >;</span>
<span class="token comment">// #ifdef MP</span>
uni<span >.</span><span class="token function">getSetting</span><span >(</span><span >{<!-- --></span>
<span class="token function">success</span><span >(</span><span class="token parameter">res</span><span >)</span> <span >{<!-- --></span>
<span >if</span> <span >(</span><span >!</span>res<span >.</span>authSetting<span >[</span>a<span >]</span><span >)</span> <span >{<!-- --></span> <span class="token comment">//3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置</span>
_this<span >.</span><span class="token function">getAuthorizeInfo</span><span >(</span><span >)</span>
<span >}</span> <span >else</span> <span >{<!-- --></span>
_this<span >.</span><span class="token function">getLocationInfo</span><span >(</span><span >)</span>
<span >}</span>
<span >}</span>
<span >}</span><span >)</span><span >;</span>
<span class="token comment">// #endif</span>
<span >}</span><span >,</span>
<span >}</span>
<span >}</span></script>
<style scoped lang=“scss”>
.btn {
&/deep/.u-btn {
width: 148rpx;
height: 56rpx;
}
}
</style><style>
@import ‘@/common/free.css’;
@import ‘@/common/common.css’;
</style>
先看效果
地图中的标记点 可以动态变化自定义的图片与内容
原理
通过map组件中的 markers 属性 设置标记点 用于在地图上显示标记的位置
map组件所在uniapp官网位置：map-uni-app https://uniapp.dcloud.io/component/map
1、想要动态改变标记点图标 必须把默认的标记点覆盖，用到了markers参数下的 iconPath设置标记点的图标，如果需求只需要简单的动态改变标记点的图标到这一步就结束了，但是如果需要动态改变标记点图标及内容(动态显示文字)就需要看下一步！
2、把iconPath设置的图片改用一张1*1像素的透明背景图 png格式的。
3、markers 列表中的 customCallout 设置自定义气泡窗口 display: "ALWAYS"总数显示,并在标签内配置 slot="callout"这里注意的是 要比map组件层级高 必须使用 cover-view 或者 cover-image 标签;
<!-- 自定义窗口 -->
<cover-view slot="callout">
<template v-for="(item,index) in markers">
<cover-view :marker-id="item.id" :key='index'>
<cover-view class="position-relative" style="width: 92rpx; height: 78rpx;">
<cover-image class="position-absolute" style="width: 92rpx; height: 78rpx;" :src='item.options.iconPath'></cover-image>
<cover-view style="top: 13rpx; left: 45rpx; width: 30rpx; height: 30rpx;"
class="border bg-white rounded-circle flex align-center justify-center position-absolute">
<cover-view>{{item.options.labelName}}</cover-view>
</cover-view>
</cover-view>
</cover-view>
</template>
