高德地图的查询(地铁…)
引入的是高德的搜索插件(AMap.PlaceSearch)
具体使用: (记得注册高德地图的key) , 效果图在最后哦。
- 引入高德sdk,记得注册
key
- 将sdk放在vue的public文件夹的index.html下注意红框的地方,是你要用到的插件,否则会报AMap.xx is not constructor错误
- 然后在vue.config.js文件里面定义地图变量
export default {
configureWebpack: {
externals: {
'AMap': 'AMap' // 高德地图配置
}
}
}
- 在组件里面引入
import AMap from 'AMap'
相应代码及解释:
<template>
<div>
<div id="container">
<div id="panel"></div>
</div>
<div class="footer mt10">
<div style="font-size:16px;" v-for="(item, index) in distance" :key="index">
<span>距离</span>
<span class="ml10 mr10" style="color:#2D78E1;">{
{
campus}}校区</span>
<span>{
{
(item / 1000).toFixed(2)}}km</