如何利用JavaScript API绘制高德地图

JavaScript031

如何利用JavaScript API绘制高德地图,第1张

这里，我用的是HTML5页面进行设计的。那么，首先创建一个HTML5文件，

如下图所示：

接着，设置下禁止浏览器窗口大小改变地图大小，并引入地图核心JS

<meta name="viewport" content="initial-scale=1.0,user-scalable=no">

设置因浏览器大小改变地图大小，进行禁止；引入地图核心js前，记得到官网上申请密钥

如下图所示：

地图如何在页面上展示出来，这里就需要一个地图容器。于是，我在<body></body>中设置一个div，作为地图容器，

如下图所示：

接着，设置下body、div元素的样式，如宽度、高度、字体以及字体大小等。这里，必须要设置下宽度和高度，且使用百分比，这样让其自适应，

如下图所示：

然后，编写生成地图的核心JS，指定地图的经纬度，地图为2D的，放大级别zoom，

如下图所示：

最后，将地图初始化函数放到body中的onload事件中，让初始化页面就加载地图，

如下图所示：

7

但是，我发现这样写的话，地图始终不出来；于是，我仔细检查下，结果发现地图容器的ID和初始化函数地图ID不一致，还有没有设置html元素的样式，导致地图始终显示不了。修改完了之后，重新刷新浏览器，地图显示出来了

最近公司要写一个找公厕的项目，基本的要求就是将用户周围1000米之内所有公厕都展示到地图上，并且点击公厕的时候要地图要移至到公厕的中心位置，还有搜索到的公厕也要移至到地图中心位置；

项目一启动，我就第一时间选择了高德地图，不要问为啥不选择百度地图，对于百度地图的表现我表示，累了；

基本上将根本高德地图的开发文档，建立个地图，然后将点标识在地图上

后端返回的数据类型是数组，所以我这里进行了一下for循环，将每个对象都创建一个覆盖点，然后将创建的点的实例都放到一个数组markerList里面。

接下来要实现这个效果，就是点击的时候给个选中的状态

我是这样写的，先创建个空数组，然后再创建一个覆盖点的实例，这个实例就是最红的那个覆盖点，然后将这个点添加到地图中，这样的话，新的点会覆盖原来位置的那个点

记住每次调用这个点击事件的话，一定要先清楚之前的覆盖点，然后数组一定要初始化一下，要不然就会出现这种情况

谢谢观看！

1、创建一个自定义图层实例或获取canvas实例varcanvas等于documentcreateElement(canvas)或将canvas宽高设置为地图实例的宽高。

2、为自定义图层添加渲染方法自定义图层的render方法即用户自定义的图层绘制方式。