长沙地图导航 (长沙地图导航标注店铺)

style.css css map {width: 100%;height: 500px; }sidebar {width: 20%;float: right; }store-list {list-style-type: none;padding: 0; }store-list li {cursor: pointer;margin-bottom: 5px; }map.js javascript // 创建地图 var map = new google.maps.Map(document.getElementById('map'), {center: {lat: 28.2282, lng: 112.9388},zoom: 13 });// 创建信息窗口 var infoWindow = new google.maps.InfoWindow();// 载入店铺数据 var stores = [{name: '星巴克（五一广场店）',location: {lat: 28.2282, lng: 112.9388}},{name: '肯德基（黄兴路店）',location: {lat: 28.2193, lng: 112.9416}},{name: '必胜客（解放西路店）',location: {lat: 28.2115, lng: 112.9493}} ];// 在地图上添加店铺标记 for (var i =0; i < stores.length; i++) {var store = stores[i];var marker = new google.maps.Marker({position: store.location,map: map,title: store.name});// 为标记添加点击事件marker.addListener('click', function() {infoWindow.setContent(this.getTitle());infoWindow.open(map, this);});// 将标记添加到列表中var li = document.createElement('li');li.innerHTML = store.name;li.addEventListener('click', function() {map.setCenter(store.location);map.setZoom(15);infoWindow.setContent(store.name);infoWindow.open(map, marker);});document.getElementById('store-list').appendChild(li); }