Question

如何制作与ul列表相关的标记。在悬停时，相关标记应该激活的列表与鼠标悬停方式相同。

示例

小组1：位置1 位置2 位置3

第2小组：带标记的地图

我的代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<link href="assets/css/map-icons.css" type="text/css" rel="stylesheet">
<script src="assets/js/map-icons.js"></script>

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
  .label {
    color:#fff;
    font-size:14px;
  }
</style><ul>
    <li>Marker 1</li>
    <li>Marker 2</li>
    <li>Marker 2</li>
</ul>
<div id="map"></div>
<script>
function initialise() {
    var myLatLng = {lat: -25.363, lng: 131.044};
    var myLatLng1 = {lat: -29.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: myLatLng
    });

    var Map_Pin = 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z';

    var icon1 = {
          path: Map_Pin,
          fillColor:'#cc0000',
          fillOpacity: 1,
          strokeColor:'#cc0000',
          strokeWeight: 2,
          scale: 0.9
        };
    var icon2 = {
          path: Map_Pin,
          fillColor:'#00ff00',
          fillOpacity: 1,
          strokeColor:'#00ff00',
          strokeWeight: 2,
          scale: 1
        };
    //One
    var marker = new Marker({
        position: myLatLng,
        map: map,
        icon: icon1,
        map_icon_label: '<span class="label">B</span>',
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'Welcome'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, this);
    });
    google.maps.event.addListener(marker, 'mouseover', function() {
        marker.setIcon(icon2);
    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        marker.setIcon(icon1);
    });

    //Two
    var marker1 = new Marker({
        position: myLatLng1,
        map: map,
        icon: icon1,
        map_icon_label: '<span class="label">C</span>',
    });
    var infowindow1 = new google.maps.InfoWindow({
        content: 'Welcome C'
    });
    google.maps.event.addListener(marker1, 'click', function(e) {
        infowindow1.open(map, this);
    });
    google.maps.event.addListener(marker1, 'mouseover', function() {
        marker1.setIcon(icon2);
    });
    google.maps.event.addListener(marker1, 'mouseout', function() {
        marker1.setIcon(icon1);
    });
  }
  google.maps.event.addDomListener(window, 'load', initialise);
</script>

Answer 1

试试这个：

演示：http://jsfiddle.net/tb552d8h/

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<link href="http://map-icons.com/dist/css/map-icons.css" type="text/css" rel="stylesheet">
<script src="http://map-icons.com/dist/js/map-icons.js"></script>

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
  .label {
    color:#fff;
    font-size:14px;
  }
</style><ul>
    <li onmouseover="showme1()">Marker 1</li>
    <li onmouseover="showme2()">Marker 2</li>
</ul>
<div id="map"></div>
<script>
var marker1;
var marker2;
var icon1;
var icon2;


function initialise() {
    var myLatLng = {lat: -25.363, lng: 131.044};
    var myLatLng1 = {lat: -29.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: myLatLng
    });

    var Map_Pin = 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z';

    icon1 = {
          path: Map_Pin,
          fillColor:'#cc0000',
          fillOpacity: 1,
          strokeColor:'#cc0000',
          strokeWeight: 2,
          scale: 0.9
        };
    icon2 = {
          path: Map_Pin,
          fillColor:'#00ff00',
          fillOpacity: 1,
          strokeColor:'#00ff00',
          strokeWeight: 2,
          scale: 1
        };
    //One
    marker1 = new Marker({
        position: myLatLng,
        map: map,
        icon: icon1,
        map_icon_label: '<span class="label">B</span>',
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'Welcome'
    });
    google.maps.event.addListener(marker1, 'click', function() {
        infowindow.open(map, this);
    });
    google.maps.event.addListener(marker1, 'mouseover', function() {
        marker1.setIcon(icon2);
    });
    google.maps.event.addListener(marker1, 'mouseout', function() {
        marker1.setIcon(icon1);
    });

    //Two
    marker2 = new Marker({
        position: myLatLng1,
        map: map,
        icon: icon1,
        map_icon_label: '<span class="label">C</span>',
    });
    var infowindow1 = new google.maps.InfoWindow({
        content: 'Welcome C'
    });
    google.maps.event.addListener(marker2, 'click', function(e) {
        alert("here")
        infowindow1.open(map, this);
    });
    google.maps.event.addListener(marker2, 'mouseover', function() {
        marker2.setIcon(icon2);
    });
    google.maps.event.addListener(marker2, 'mouseout', function() {
        marker2.setIcon(icon1);
    });
  }
  google.maps.event.addDomListener(window, 'load', initialise);



showme1 = function (index) {
    marker1.setIcon(icon2);
    marker2.setIcon(icon1);
}

showme2 = function (index) {
    marker2.setIcon(icon2);
    marker1.setIcon(icon1);
}

</script>

带有与ul列表相关的标记的Google Map

1 个答案: