概述
先看看效果，再看看配置和代码，这样会更有兴趣，哈哈
一、注册账号并申请Key
1. 首先，注册开发者账号，成为高德开放平台开发者
2. 登陆之后，在进入「应用管理」 页面「创建新应用」
3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
二、 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=您申请的key值"></script> 三、 添加div标签作为地图容器，同时为该div指定id属性；
HTML
<div id="container"></div> 四、 为地图容器指定高度、宽度；
CSS
#container {width:300px; height: 180px; } 五、 进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；
HTML
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 六、异步加载 JS API
JavaScript
window.onLoad = function(){
var map = new AMap.Map('container');
}
var url = 'https://webapi.amap.com/maps?v=1.4.11&key=您申请的key值&callback=onLoad';
var jsapi = doc.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);
更多的加载方式，请查看「JS API 的加载」
七、完整Demo代码如下：
<!document html>
<html>
<head>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key="></script>
<script>
window.onLoad = function(){
var map = new AMap.Map('container');
}
var url = 'https://webapi.amap.com/maps?v=1.4.11&key=&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);
</script>
<style>
#container {width:1024px; height: 500px; }
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>更多精彩技术分享请浏览本人博客：https://blog.csdn.net/wohiusdashi
最后
以上就是忐忑小懒虫为你收集整理的在线高德地图Demo（新测）的全部内容，希望文章能够帮你解决在线高德地图Demo（新测）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复