高德地图怎么运用（高德地图的2种引入方式）
导读：方法一：使用amap-jsapi-loader...
方法一：使用amap-jsapi-loader 插件
步骤1.npm安装插件 npm install @amap/amap-jsapi-loader --save 步骤2. 创建地图组件vMap/index页面代码如下：
注意点：地图组件要有高度 ，否则无法显示
步骤3.父组件页面使用vMap自定义地图组件方法二：使用script直接引入
步骤1. 在Public的inde.html文件的script中直接引入
步骤2.在config中配置
configureWebpack: {
externals: {
AMap: "AMap"
},
},
步骤3. 创建自定义地图组件
template><div class="mapContainer" :id="uuid"></div>
</template>
<script>
import { uuid } from "@/utils/tools";
import AMap from "AMap"
export default {
data() {
return {
uuid: uuid(16),
map: null,
mapMode: "3D",
city: "裕华区",
point: true,
center:[ 114.5522, 38.0011 ]
};
},
mounted() {
this.init();
},
computed: {},
methods: {
init() {
this.map = new AMap.Map(this.uuid, {
mapStyle: "amap://styles/467551ea881c87ff34f6837df70efee6",
viewMode: this.mapMode,
pitch: 45,
resizeEnable: true, //是否监控地图容器尺寸变化
zooms: [ 12, 20 ], //设置地图级别范围
zoom: 10, //初始化地图层级
zoomEnable: this.point, // 是否缩放
scrollWheel: this.point, // 是否支持滚轮缩放
dragEnable: this.point, // 是否支持鼠标拖拽平移
jogEnable: true, // 是否支持缓动效果
buildingAnimation: true, // 模块消失是否有动画效果
center: this.center, //初始化地图中心点
lang: "zh_cn"
});
},
},
};
</script>
<style lang="less" scoped>
.mapContainer {
width: 100%;
height: 100%;
//隐藏左下角高德地图logo
.amap-logo,
.amap-copyright {
display: none !important;
}
}
</style>
步骤4.父组件页面使用vMap自定义地图组件
注意：init方法要放在mounted中 ，不然会提示 Error in created hook: "Error: Map container div not exist"创建挂钩时出错：“错误：映射容器div不存在 ”,同样div也需要高宽度
附带生成随机id方法：
/**
* 生成uuid
* @param len 长度 number
* @param radix 随机数基数 number
* @returns { string }
*/
export const uuid = (len = 16, radix = 62) => {
const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("")
const uuid = []
if (len) {
for (let i = 0; i < len; i++) {
uuid[i] = chars[Math.floor(Math.random() * radix)]
}
} else {
let r
uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-"
uuid[14] = "4"
for (let i = 0; i < 36; i++) {
if (!uuid[i]) {
r = Math.floor(Math.random() * 16)
uuid[i] = chars[(i === 19) ? ((r % 4) % 8) + 8 : r]
}
}
}
return uuid.join("")
}
搜索
复制
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！