从下拉菜单放大到Google Marker

Question

I am trying to create a world map with markers. 我正在尝试用标记创建世界地图。 I want a dropdown list and when you click a country name the map zooms to the country where a marker has been placed. 我需要一个下拉列表，当您单击国家名称时，地图会缩放到放置标记的国家。 I did a Google search and found this question: Google Maps API dropdown list, zoom to marker which is basically what I am looking for. 我进行了一次Google搜索，发现了一个问题： Google Maps API下拉列表，放大到标记，这基本上就是我要寻找的。 I tried to edit it but it's not working. 我尝试对其进行编辑，但无法正常工作。 I don't want info windows, just the name of the country when you hover over each marker. 我不需要信息窗口，只需将鼠标悬停在每个标记上时的国家名即可。 I am also making my own markers. 我也在做自己的标记。 I have also added a 'Your Location' feature which I am using for the center of the map. 我还添加了“您的位置”功能，该功能用于地图中心。 I would like to include that in the dropdown menu which when clicked it centers the map back to the original position. 我想将其包含在下拉菜单中，单击该菜单时它将使地图居中回到原始位置。 Once I get it to work, I should be able to add every country in the world. 一旦开始运作，我便应该能够添加世界上每个国家。 Any ideas of what I'm doing wrong and how to make it work? 关于我做错了什么以及如何使其工作的任何想法？

The Javascript: Javascript：

function findYou(){
    if(navigator.geolocation.getCurrentPosition(showPosition, noLocation, {maximumAge : 1200000, timeout : 30000})){
    }
     else{
        document.getElementById("lat").innerHTML="This browser does not support geolocation.";
    }
    }
    function showPosition(location){
        var latitude = location.coords.latitude;
        var longitude = location.coords.longitude;
        var accuracy = location.coords.accuracy;
        var position = new google.maps.LatLng(latitude, longitude);
        var myOptions = {
            zoom:2,
            center: position,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL }
  }
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    var homeIcon = 'YourLocation.png';
    var point = new google.maps.Marker({
        icon: homeIcon,
        position: position,
        map: map,
        title:"Your Location"
    });
    markers[1] = UnitedStatesMarker;

    var myLatLng = new google.maps.LatLng(38.907192, -77.036871);
    var UnitedStatesMarker = new google.maps.Marker({
        position: myLatLng,
        icon: src = 'UnitedStates.png',
        map: map,
        title: "United States"
    });
    markers[2] = UnitedStatesMarker;

function dropdownChanged()
{
    var index = document.getElementById("myList3").value;
    var marker = markers[index];
    var position = marker.getPosition();
    map.setCenter(position);
}

The HTML: HTML：

<title>World Countries</title>
<style>
#map-canvas {
    top: 5px;
    left: 5px;
    width:75%;
    height:600px;
    border:1px solid black;
}    
#sidebar {
    width:325px;
    height:600px;
    position: absolute;
    top: 8px;
    right: 13px;
    text-align:center;
}    
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="javascript4.js"></script>    
</head> 
<body>
<script>findYou();</script>
<div id="map-canvas"></div>
<div id="sidebar">
<h3>World Countries</h3>
<select id = "myList3" onchange="dropdownChanged();">
<option value = "">Select a Country</option>
<option value = "1">Your Location</option>
<option value = "2">United States</option>

Answer 1

If you're planning to manage a long list of markers, it's a bad idea to declare them right on your code. 如果您打算管理一长串标记，则在代码中正确声明它们是一个坏主意。 You'd be better off putting them in an array and looping over that array to encapsulate the desired behavior. 您最好将它们放在数组中并在该数组上循环以封装所需的行为。

But first: you need two basic HTML elements here: a SELECT control to hold your destinations (we will say its ID is "selectlocation") and a DIV to hold the map. 但首先：在这里需要两个基本的HTML元素：一个用于保存目的地的SELECT控件（我们将其ID为“ selectlocation”）和一个用于保存地图的DIV。

<select id="selectlocation">
    <option value="10|10|3">Original Map</option>
</select>
<div id="map-canvas"></div>

The first option will reset the map to its original position and zoom. 第一个选项会将地图重置为其原始位置并缩放。 More on that later 以后再说

Each element of your data array should contain the basics: the position of your marker (and eventual map center, when you have that location selected), the map zoom you want to see that location with and the location name. 数据数组的每个元素都应包含以下基本信息：标记的位置（以及最终的地图中心，当您选择该位置时），要用来查看该位置的地图缩放比例以及位置名称。 For example 例如

var markerData= [
        {lat: 36.4 , lng: -120.9  , zoom: 7 , name: "California"},
        {lat: 28 , lng: -81  , zoom: 7 , name: "Florida"},
        {lat: 40.39 , lng: -3.67  , zoom: 8 , name: "Madrid"},
    ];

Then, when your map is already initialized, you can iterate over markerData to add both a marker and an option to the SELECT control. 然后，当地图已经初始化时，可以遍历markerData来向SELECT控件添加标记和选项。

markerData.forEach(function(data) {
    // Create a marker on given position
    var newmarker= new google.maps.Marker({
        map:map,
        position:{lat:data.lat, lng:data.lng},
        title: data.name
    });

    // Create an option on the SELECT control
    jQuery("#selectlocation").append('<option value="'+[data.lat, data.lng,data.zoom].join('|')+'">'+data.name+'</option>');
});

You see that each option has a value that means lat|lng|zoom, because I want the html element to hold all the info it needs to move and zoom the map. 您会看到每个选项都有一个值，表示lat | lng | zoom，因为我希望html元素保存移动和缩放地图所需的所有信息。

Finally, I set a listener to the change event of the SELECT to move and zoom the map using the value of the selected option. 最后，我为SELECT的change事件设置了一个侦听器，以使用选定选项的值移动和缩放地图。

jQuery(document).on('change','#selectlocation',function() {
    var latlngzoom = jQuery(this).val().split('|');
    var newzoom = 1*latlngzoom[2],
    newlat = 1*latlngzoom[0],
    newlng = 1*latlngzoom[1];
    map.setZoom(newzoom);
    map.setCenter({lat:newlat, lng:newlng});
});

See the complete example working 查看完整的示例工作

There are several ways to do this, don't take mine as correct. 有几种方法可以做到这一点，不要认为我的方法正确。 You could have put the markers on an array and use the element to point to a given index in that array, or you could have used data attributes to avoid using split on the option value, but those are just implementation details. 您可以将标记放在数组上，并使用元素指向该数组中的给定索引，或者可以使用数据属性来避免对选项值使用split，但这只是实现细节。

从下拉菜单放大到Google Marker

问题描述

1 个解决方案

解决方案1
0 2014-11-18 11:37:03

从下拉菜单放大到Google Marker

问题描述

1 个解决方案

解决方案1 0 2014-11-18 11:37:03

解决方案1
0 2014-11-18 11:37:03