淮南哪里做网站,seo的重要性,偃师网站开发,wordpress免费响应式主题一、效果图#xff1a;
点击左侧地址列表#xff0c;右侧地图跟着改变。
二、代码实现#xff1a;
一进入页面时#xff0c;通过body调用onLoadonLoad()函数#xff0c;确保地图正常显示。
body onLoadonLoad()!--左侧代码--
点击左侧地址列表右侧地图跟着改变。
二、代码实现
一进入页面时通过body调用onLoadonLoad()函数确保地图正常显示。
body onLoadonLoad()!--左侧代码--div classaddressListdiv classaddress_itemonclicksetCenterAndZoom(36.66416, 117.03215,济南市历下区泉城路世茂广场东座商场三楼E370br /Red Copper专柜 )div classname济南世茂店/divdiv classinfoboximg srcstatic/imgs/region2x_1.png /div classinfos济南市历下区泉城路世茂广场东座商场三楼E370br /Red Copper专柜 /div/div/divdiv classaddress_itemonclicksetCenterAndZoom(36.66637,117.1969,济南市历城区经十路与凤鸣路交汇口融创茂东门L1层1032br /Red Copper专柜)div classname济南融创店/divdiv classinfoboximg srcstatic/imgs/region2x_1.png /div classinfos济南市历城区经十路与凤鸣路交汇口融创茂东门L1层1032br /Red Copper专柜/div/div/divdiv classaddress_itemonclicksetCenterAndZoom(39.9042, 116.4074,济南市槐荫区经七纬十二路和谐银座七楼br /Red Copper专柜 )div classname济南和谐店/divdiv classinfoboximg srcstatic/imgs/region2x_1.png /div classinfos济南市槐荫区经七纬十二路和谐银座七楼br /Red Copper专柜 /div/div/div……/div!--右侧代码--div classimgbox idmap/divscript typetext/javascriptsrchttp://api.tianditu.gov.cn/api?v4.0tk此处填写自己申请的key值/scriptscriptvar map;var zoom 18;var marker;function onLoad() {//初始化地图对象map new T.Map(map);//设置显示地图的中心点和级别map.centerAndZoom(new T.LngLat(117.02548, 36.66401), zoom);var lnglat new T.LngLat(117.02548, 36.66401);//创建信息窗口对象var infoWin new T.InfoWindow();infoWin.setLngLat(lnglat);//设置信息窗口要显示的内容infoWin.setContent(济南市历下区泉城路世茂广场东座商场三楼E370 Red Copper专柜);//向地图上添加信息窗口map.addOverLay(infoWin);}function setCenterAndZoom(lat, lng, name) {// var lng document.getElementById(lng).value;// var lat document.getElementById(lat).value;// var zoom document.getElementById(zoom).value;map.centerAndZoom(new T.LngLat(lng, lat), zoom);let newMarker map.getOverlays(); // 获取到了地图上的所有点// console.log(newMarker, newMarker);for (let i 0; i newMarker.length; i) {map.removeOverLay(newMarker[i])};var lnglat new T.LngLat(lng, lat);//创建信息窗口对象var infoWin new T.InfoWindow();infoWin.setLngLat(lnglat);//设置信息窗口要显示的内容infoWin.setContent(name);//向地图上添加信息窗口map.addOverLay(infoWin);}/script
/bodyok~
