关于高德地图JS标点的问题

JavaScript021

关于高德地图JS标点的问题,第1张

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

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

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

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

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

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

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

谢谢观看!

这里,我用的是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元素的样式,导致地图始终显示不了。修改完了之后,重新刷新浏览器,地图显示出来了

定位蓝点不显示有很多种原因,我这里记录一种我遇到过的,就是我添加了定位信息之后,定位蓝点会消失,把定位信息去掉,蓝点就出现了,这是我在初始化定位的时候添加了这行代码

aMap.setLocationSource(this)//设置了定位的监听,这里要实现LocationSource接口

去掉就可以了