永兴集团(中国区)官方网站-Macau App Station

400-800-9385
网站建设资讯详细

在页面上切换显示多个动态的高德地图

发表日期:2023-04-10 10:12:31   作者来源:永兴集团   浏览:2426   标签:网站展示地图    

在国内的网站的联系永兴集团的动态地图中,百度地图与高德地图都是比较常用的,都有比较合适的网页地图插件,从功能的普遍性讲,百度地图还是比高德地图好出不少的,但奈何百度地图只支持中文,没有英文版,而高德地图是有英文版的(虽然更新很慢,很多位置更新不及时)所以如果是做中英文版网站的动态地图时,可以中文版用百度地图,英文版用谷歌地图,中英文版都使用同一种地图的话,可以用高德地图,下面讲一下如何实现在同一个页面里点击显示不同的地图位置,如下图所示:
 

地图展示


 
html代码如下:
 

   
南京总部

 
苏州

深圳


   

             
    

JS代码如下:
     
JS切换效果如下:

 
要求引入jquery.js和高德地图的JS文件和CSS文件,如下图:
 

引入JS

可通过高德地图API页面获取地图上的经纬度,如下图所示:
 

地图代码


其中lng为经度, lat为纬度,这样就能实现地图的标注点。
最后说一下,从准确性和运用广泛性来讲。中文网站用百度地图,英文网站用谷歌地图是最好的选择,但谷歌地图在国内无法访问(需要梯子),所以折中的方法就是中英站使用同一个地图时,可以使用高德地图显示。如果英文网站不向国内用户浏览,则可以使用谷歌地图,这都要取决客户的选择了。
 
 
如没特殊注明,文章均为永兴集团原创,转载请注明来自/news/6734.html
XML 地图