vue 做一个定点地图的页面（定位到你想要的地点）
生活随笔
收集整理的這篇文章主要介紹了
vue 做一个定点地图的页面（定位到你想要的地点）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
實(shí)例：如何用vue做一個(gè)定點(diǎn)地圖的頁面，進(jìn)入一個(gè)地圖，并且定位到你想要的地點(diǎn)。
這里舉一個(gè)定點(diǎn)醫(yī)院的例子。
在pages中添加一個(gè)vue頁面為Hospital_map.vue，將該網(wǎng)頁注冊到路由src/router/index.js
（1）在高德地圖開發(fā)者注冊一個(gè)賬號，官網(wǎng)地址：https://lbs.amap.com/
（2）在index.html頁面添加js api的入口腳本標(biāo)簽，并將其中「您申請的key值」替換為您剛剛申請的 key：
（3）在Hospital_map.vue添加div標(biāo)簽作為地圖容器，同時(shí)為該div指定id屬性：
<div id="container"></div>具體參考網(wǎng)址：https://lbs.amap.com/api/javascript-api/guide/abc/prepare
（4）獲取位置坐標(biāo)：https://lbs.amap.com/console/show/picker
如下，取得坐標(biāo)后創(chuàng)建一個(gè)maker實(shí)例：
完整代碼如下：
index.html
index.js
import Vue from 'vue' import Router from 'vue-router'Vue.use(Router)/* Layout */ import Layout from '@/layout'/*** Note: sub-menu only appear when route children.length >= 1* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html** hidden: true if set true, item will not show in the sidebar(default is false)* alwaysShow: true if set true, will always show the root menu* if not set alwaysShow, when item has more than one children route,* it will becomes nested mode, otherwise not show the root menu* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb* name:'router-name' the name is used by <keep-alive> (must set!!!)* meta : {roles: ['admin','editor'] control the page roles (you can set multiple roles)title: 'title' the name show in sidebar and breadcrumb (recommend set)icon: 'svg-name' the icon show in the sidebarbreadcrumb: false if set false, the item will hidden in breadcrumb(default is true)activeMenu: '/example/list' if set path, the sidebar will highlight the path you set}*//*** constantRoutes* a base page that does not have permission requirements* all roles can be accessed*/ export const constantRoutes = [{path: '/login',component: () => import('@/views/login/index'),hidden: true},{path: '/404',component: () => import('@/views/404'),hidden: true},// 醫(yī)院{path: '/hospital',component: Layout,meta: { title: '定點(diǎn)醫(yī)院', icon: 'hospital' },children: [{ // 醫(yī)院地圖path:"map",component: () => import('@/pages/HospitalMap'),hidden:true,}]},// 404 page must be placed at the end !!!{ path: '*', redirect: '/404', hidden: true } ]const createRouter = () => new Router({// mode: 'history', // require service supportscrollBehavior: () => ({ y: 0 }),routes: constantRoutes })const router = createRouter()// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 export function resetRouter() {const newRouter = createRouter()router.matcher = newRouter.matcher // reset router }export default routerHospitalMap.vue
<template><!-- 模板，html --><div class="hospital_map"><!-- 地圖渲染的容器 --><div id="container_hospital"></div></div> </template> <script> // 腳本，js export default {// dom追加到網(wǎng)頁中mounted(){var map = new AMap.Map('container_hospital');map.setMapStyle('amap://styles/63af89bdb35aca086c81ae384f545103');// 創(chuàng)建一個(gè) Marker 實(shí)例：var marker = new AMap.Marker({position: new AMap.LngLat(114.932499,25.855219), // 經(jīng)緯度對象，也可以是經(jīng)緯度構(gòu)成的一維數(shù)組[114.932499,25.855219]title: '贛南醫(yī)學(xué)院第一附屬醫(yī)院'});// 將創(chuàng)建的點(diǎn)標(biāo)記添加到已有的地圖實(shí)例：map.add(marker);} } </script> <style scoped> /* 樣式，css */ #container_hospital {height:600px } </style>結(jié)果展示：
總結(jié)
以上是生活随笔為你收集整理的vue 做一个定点地图的页面（定位到你想要的地点）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IT主管要管理好一个部门两种最有效的方法
- 下一篇： 信息安全与网络安全有什么关系？