【VUE-AMap】记录一下VUE使用高德地图，用于公司官网，显示公司定位时，自定义图标不显示的问题

Gyk-gyk

已于 2022-06-01 15:06:02 修改

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端

于 2022-06-01 15:01:33 首次发布

本文链接：https://blog.youkuaiyun.com/gaoyuekang/article/details/125083529

版权

本文记录了在Vue.js项目中使用高德地图API时遇到的自定义图标不显示的问题。作者通过导入本地图片并在创建Marker时正确引用，成功解决了问题。尽管高德地图官方示例未能直接应用，但经过一番尝试，最终实现了在公司官网上显示定位的自定义图标功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是，折腾了很久，才成功的，写法，高德官网上的例子，不知道为啥，搬下来不管用，没去细究，确实对前端木得兴趣。

本地的图片，先import出来，再在创建Mark的时候，加载进去

<template>
    <div id="location-map"></div>
</template>

<script>
	import MarkIcon from '@/assets/images/mark_r.png'

	export default {
		name: 'Index',
		components: {
		},
		setup(){
			const map = shallowRef(null);
			return{
				map,
			}
		},
		data(){
			return{
				map:null,
			}
		},
		methods:{
			initMap(){
				AMapLoader.load({
					key:"高德开发者平台申请的web端key",
					version:"2.0",
					plugins:[''],  // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				}).then((AMap)=>{
					this.map = new AMap.Map("location-map",{  //设置地图容器id
						viewMode:"2D", //是否为3D地图模式
						zoom:18,       //初始化地图缩放级别
						center:[100.123456,36.123456], //初始化地图中心点位置，

最低0.47元/天解锁文章