二、创建应用
账号主体可能有不同的应用项目,比如你想开发DD出行、C操、大Z点评等,每个项目里面又分小程序、
APP
、
PC
端等等不同的使用场景，每个场景都有一个
key
,这个
key
有点像ID、密码之类的，用来访问地图时可以知道哪个应用、接口访问了这个地图。
添加key
创建成功后账号主体跟项目都有了,
key
还没有,点击添加创建
key
,用于访问的时候提供身份认证.
key
的名称最好跟应用场景有关,方便后期管理
申请完毕后
三、创建高德地图
在首页可以看到有多种开发支持平台,点击进去可以看到不同应用场景的
API
文档
可以在
script
引入,
vue
中可以进行异步加载
JS
,在
mounted
加载完毕以后进行异步加载,
这里示范
vue
,
key
是刚刚申请的值
注意:1.window在ssr/nuxt只有在mounted加载以后才出现,所以不能写在created
2.doc需要补全document
<script>
export default {
mounted() {
window.onLoad = function () {
var map = new AMap.Map("container");
var url =
"https://webapi.amap.com/maps?v=1.4.15&key=16a302b5bbfb4ecd11a3738d9e6b3552&callback=onLoad";
var jsapi = document.createElement("script");
jsapi.charset = "utf-8";
jsapi.src = url;
document.head.appendChild(jsapi);
</script>
最后只要在页面添加一句代码
构造参数中的container为准备阶段添加的地图容器的id：
<template>
<div id="container"></div>
</template>
如上已经实现了,只是因为没有宽高所以没有显示,给上宽高就可以了
<style lang="less" scoped>
#container {
width: 600px;
height: 400px;
</style>
四、简单配置
创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性：
在container后面添加一个对象
zoom:缩放级别
center:指定数组以经纬度的方式设中心点,默认是当前位置
viewMode:3D视图
var map = new AMap.Map("container", {
zoom: 20,
center: [113.3245904, 23.1066805],
viewMode: "3D",
五、点标记
官方文档中有很多标记的类型,这里示范点标记
var marker = new AMap.Marker({
position: [113.3245904, 23.1066805],
title: "广州塔",
offset: new AMap.Pixel(-100, -100),
icon: "//vdata.amap.com/icons/b18/1/2.png",
content: "<h1>广州塔Content</h1>",
map.add(marker);
六、插件的使用
高德中有很多功能,但不是每个都自带而是需要我们自己引入.这里示例一个导航条
插件依旧写在回调函数内,通过AMap.plugin方法按需引入插件，第一个参数是插件名,第二个是在plugin回调之后使用插件功能。
AMap.plugin("AMap.ToolBar", function () {
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
七、完整代码参考
<template>
<div id="container"></div>
</template>
<script>
export default {
mounted() {
window.onLoad = function () {
var map = new AMap.Map("container", {
zoom: 20,
center: [113.3245904, 23.1066805],
viewMode: "3D",
var marker = new AMap.Marker({
position: [113.3245904, 23.1066805],
title: "广州塔",
offset: new AMap.Pixel(-100, -100),
icon: "//vdata.amap.com/icons/b18/1/2.png",
content: "<h1>广州塔Content</h1>",
AMap.plugin("AMap.ToolBar", function () {
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
map.add(marker);
var url =
"https://webapi.amap.com/maps?v=1.4.15&key=16a302b5bbfb4ecd11a3738d9e6b3552&callback=onLoad";
var jsapi = document.createElement("script");
jsapi.charset = "utf-8";
jsapi.src = url;
document.head.appendChild(jsapi);
</script>
.<style lang="less" scoped>
#container {
width: 600px;
height: 400px;
</style>
复制代码
- 95
-
我是修行千年的Interface
Vue.js
