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

html代码如下：div class=progrssdiv class=name data-point1=118.831377 data-point2=31.930893 南京总部/divdiv class=name data-point1=120.614977 data-point2=31.331292 苏州/divdiv class=name data-point1=113.859061 data-point2=22.571552 四川/div/divdiv class=map map-active id=container2 style=width:100%; height: 500px;!--此处显示地图的内容--/divJS代码如下：script type=text/javascriptfunction get_map(point1,point2){//初始化地图对象，加载地图var map = new AMap.Map(container2, {resizeEnable: true, zoom:11,lang:cn});//其中参数point1为地图的经度,point2为地图的纬度Var lnglats = [[point1,point2]];var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});//确定地图的位置，并将在地图增加标注点for (var i = 0, marker; i lnglats.length; i++) {var marker = new AMap.Marker({position: lnglats[i],map: map});}map.setFitView();//显示不同的经度和纬度的地图}/scriptJS切换效果如下：script// 地图切换效果$( .progrss .name).on(click, function () {let index = $(this).index();$(this).addClass(name-active).siblings().removeClass(name-active) $( .contact-list .link-detail).eq(index).addClass(detail-active).siblings().removeClass(detail-active)var point1 = $(this).attr(data-point1);//获得要所在地点的经度var point2 = $(this).attr(data-point2);//获得要所在地点的纬度get_map(point1,point2); //调用地图显示方式，显示切换后的地图位置}).eq(0).click();//默认显示第一个地点的位置/script要求引入jquery.js和高德地图的JS文件和CSS文件，如下图：

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

其中lng为经度， lat为纬度，这样就能实现地图的标注点。最后说一下，从准确性和运用广泛性来讲。中文网站用百度地图，英文网站用谷歌地图是最好的选择，但谷歌地图在国内无法访问(需要梯子)，所以折中的方法就是中英站使用同一个地图时，可以使用高德地图显示。如果英文网站不向国内用户浏览，则可以使用谷歌地图，这都要取决客户的选择了。

在页面上切换显示多个动态的高德地图_成都网站制作   https://cdnanqi.cn/wangzhanzhizuo/10962.html