vue实现开发地图应用（使用高德地图 JS API ）

高德开放平台教程：https://lbs.amap.com/api/javascript-api/guide/abc/prepare

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI )」

然后开始调用JS API的相关接口。

我这里是用的异步加载

    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key值&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);


      window.onLoad = function () {
        // 创建地图，同时给地图设置中心点、级别、显示模式、自定义样式等属性
        _this.map = new AMap.Map("mapChart", {
          resizeEnable: true,
          // center: [116.397428, 39.90923],
          viewMode: "3D", //使用3D视图
          zoom: 13,
          mapStyle: "amap://styles/darkblue",
        });
        // 使用clearMap方法删除所有覆盖物
        _this.map.clearMap();
      };

添加点标记

      style: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", // 标记样式图片


          new AMap.Marker({
            icon: _this.style, // 添加标记图标 
            map: _this.map,
            position: val.center,
          });

下面是完整代码

  1 <template>
  2   <div
  3     id="mapChart"
  4     ref="mapChart"
  5     style="position: absolute; width: 100%; height: 100%"
  6   ></div>
  7 </template>
  8 
  9 <script>
 10 export default {
 11   name: "OpsMarket",
 12   data() {
 13     return {
 14       map: null,
 15       mass: null,
 16       style: [
 17         "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", // 标记样式图片1
 18         "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", // 标记样式图片2
 19       ],
 20       list: [
 21         {
 22           citycode: "010",
 23           adcode: "110000",
 24           name: "北京市",
 25           center: [116.407394, 39.904211],
 26         },
 27         {
 28           citycode: "023",
 29           adcode: "500000",
 30           name: "重庆市",
 31           center: [106.551643, 29.562849],
 32         },
 33         {
 34           citycode: "1853",
 35           adcode: "820000",
 36           name: "澳门特别行政区",
 37           center: [113.543028, 22.186835],
 38         },
 39         {
 40           adcode: "440000",
 41           name: "广东省",
 42           center: [113.26641, 23.132324],
 43         },
 44         {
 45           adcode: "350000",
 46           name: "福建省",
 47           center: [119.295143, 26.100779],
 48         },
 49         {
 50           adcode: "460000",
 51           name: "海南省",
 52           center: [110.349228, 20.017377],
 53         },
 54         {
 55           adcode: "140000",
 56           name: "山西省",
 57           center: [112.562678, 37.873499],
 58         },
 59         {
 60           citycode: "1886",
 61           adcode: "710000",
 62           name: "台湾省",
 63           center: [121.509062, 25.044332],
 64         },
 65         {
 66           adcode: "520000",
 67           name: "贵州省",
 68           center: [106.70546, 26.600055],
 69         },
 70         {
 71           adcode: "450000",
 72           name: "广西壮族自治区",
 73           center: [108.327546, 22.815478],
 74         },
 75         {
 76           adcode: "620000",
 77           name: "甘肃省",
 78           center: [103.826447, 36.05956],
 79         },
 80         {
 81           adcode: "410000",
 82           name: "河南省",
 83           center: [113.753394, 34.765869],
 84         },
 85         {
 86           adcode: "130000",
 87           name: "河北省",
 88           center: [114.530235, 38.037433],
 89         },
 90         {
 91           adcode: "340000",
 92           name: "安徽省",
 93           center: [117.329949, 31.733806],
 94         },
 95         {
 96           adcode: "430000",
 97           name: "湖南省",
 98           center: [112.9836, 28.112743],
 99         },
100         {
101           citycode: "021",
102           adcode: "310000",
103           name: "上海市",
104           center: [121.473662, 31.230372],
105         },
106         {
107           adcode: "420000",
108           name: "湖北省",
109           center: [114.341745, 30.546557],
110         },
111         {
112           adcode: "230000",
113           name: "黑龙江省",
114           center: [126.661665, 45.742366],
115         },
116         {
117           adcode: "150000",
118           name: "内蒙古自治区",
119           center: [111.76629, 40.81739],
120         },
121         {
122           adcode: "640000",
123           name: "宁夏回族自治区",
124           center: [106.259126, 38.472641],
125         },
126         {
127           adcode: "360000",
128           name: "江西省",
129           center: [115.81635, 28.63666],
130         },
131         {
132           adcode: "320000",
133           name: "江苏省",
134           center: [118.762765, 32.060875],
135         },
136         {
137           adcode: "220000",
138           name: "吉林省",
139           center: [125.32568, 43.897016],
140         },
141         {
142           adcode: "210000",
143           name: "辽宁省",
144           center: [123.431382, 41.836175],
145         },
146         {
147           adcode: "370000",
148           name: "山东省",
149           center: [117.019915, 36.671156],
150         },
151         {
152           adcode: "650000",
153           name: "新疆维吾尔自治区",
154           center: [87.627704, 43.793026],
155         },
156         {
157           citycode: "022",
158           adcode: "120000",
159           name: "天津市",
160           center: [117.200983, 39.084158],
161         },
162         {
163           adcode: "630000",
164           name: "青海省",
165           center: [101.780268, 36.620939],
166         },
167         {
168           adcode: "610000",
169           name: "陕西省",
170           center: [108.954347, 34.265502],
171         },
172         {
173           adcode: "540000",
174           name: "西藏自治区",
175           center: [91.117525, 29.647535],
176         },
177         {
178           adcode: "510000",
179           name: "四川省",
180           center: [104.075809, 30.651239],
181         },
182         {
183           citycode: "1852",
184           adcode: "810000",
185           name: "香港特别行政区",
186           center: [114.171203, 22.277468],
187         },
188         {
189           adcode: "530000",
190           name: "云南省",
191           center: [102.710002, 25.045806],
192         },
193         {
194           adcode: "330000",
195           name: "浙江省",
196           center: [120.152585, 30.266597],
197         },
198       ],
199     };
200   },
201   created() {
202     var url =
203       "https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key值&callback=onLoad";
204     var jsapi = document.createElement("script");
205     jsapi.charset = "utf-8";
206     jsapi.src = url;
207     document.head.appendChild(jsapi);
208   },
209   mounted() {
210     this.mapFn();
211   },
212   methods: {
213     mapFn() {
214       var _this = this;
215       window.onLoad = function () {
216         // 创建地图，同时给地图设置中心点、级别、显示模式、自定义样式等属性
217         _this.map = new AMap.Map("mapChart", {
218           resizeEnable: true,
219           // center: [116.397428, 39.90923],
220           viewMode: "3D", //使用3D视图
221           zoom: 13,
222           mapStyle: "amap://styles/darkblue",
223         });
224         // 使用clearMap方法删除所有覆盖物
225         _this.map.clearMap();
226         // 地图通过循环添加多个标记
227         for (let val of _this.list) {
228           new AMap.Marker({
229             icon: val.citycode != undefined ? _this.style[0] : _this.style[1], // 添加标记图标 （这里是根据是否存在城市代码判断使用哪个图片）
230             map: _this.map,
231             position: val.center,
232           });
233         }
234 
235         _this.map.setFitView();
236       };
237     },
238   },
239 };
240 </script>
241 <style lang="scss">
242 .amap-icon img,
243 .amap-marker-content img {
244   width: 19px;
245   height: 27px;
246 }
247 
248 .marker {
249   position: absolute;
250   top: -20px;
251   right: -118px;
252   color: #fff;
253   padding: 4px 10px;
254   box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2);
255   white-space: nowrap;
256   font-size: 12px;
257   font-family: "";
258   background-color: #25a5f7;
259   border-radius: 3px;
260 }
261 
262 .input-card {
263   width: 18rem;
264   z-index: 170;
265 }
266 
267 .input-card .btn {
268   margin-right: 0.8rem;
269 }
270 
271 .input-card .btn:last-child {
272   margin-right: 0;
273 }
274 </style>

高德开放平台的教程描述的很全面。

高德开放平台教程：https://lbs.amap.com/api/javascript-api/guide/abc/prepare

posted on 2020-10-20 11:09 一颗狗尾巴草阅读(4802) 评论(1) 编辑收藏举报

刷新页面返回顶部

我是志友

导航

公告

vue实现开发地图应用（使用高德地图 JS API ）