如何在谷歌地图上突出显示下拉选定区域的区域答案

【问题标题】：How to highlite region of dropdown selected area on Google Map如何在谷歌地图上突出显示下拉选定区域的区域
【发布时间】：2015-09-21 11:22:25
【问题描述】：

如何在谷歌地图上突出显示下拉选定区域区域，但我希望通过 jQuery 或 javascript 来实现，我的实际要求是这个下拉列表是自动完成地址以及当我在下拉列表中选择时是哪个区域或城市，谷歌地图只是突出显示这些区域通过我的自定义高亮颜色。

<select> 
   <option>Los angeles </option>
   <option>California</option>
   <option>New yourk</option>
</select>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423284.5905135276!2d-118.41173249999996!3d34.020498899999986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA%2C+USA!5e0!3m2!1sen!2s!4v1442834158072" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

【问题讨论】：

标签： javascript jquery html google-maps

【解决方案1】：

以下示例演示如何在用户选择时显示位置：

示例

 var locations = [
        { City: 'New York', Location: '!1m18!1m12!1m3!1d193578.74109040972!2d-73.97968099999999!3d40.703312749999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+Yhdysvallat!5e0!3m2!1sfi!2sfi!4v1442836316382' },
        { City: 'Los Angeles', Location: '!1m18!1m12!1m3!1d423284.5905135276!2d-118.41173249999996!3d34.020498899999986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA%2C+USA!5e0!3m2!1sen!2s!4v1442834158072' }
    ];

    var seloption = "";
    $.each(locations, function (i) {
        seloption += '<option value="' + locations[i].Location + '">' + locations[i].City + '</option>';
    });
    $('#optLocations').append(seloption);


    $('#optLocations').on('change', function () {
        var src = "https://www.google.com/maps/embed?pb=" + this.value;
        $('#embedMap').attr('src', src);

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="optLocations" >
        <option disabled selected> -- select a location -- </option>
</select>
<br/>
<iframe id="embedMap" width="600" src="about:blank" height="450" frameborder="0" style="border:0" allowfullscreen='true'></iframe>

示例 2

使用Google Maps Embed API

  var locations = [
        { City: 'New York' },
        { City: 'Los Angeles' },
        { City: 'Moscow' },
        { City: 'Paris' }
    ];

    var seloption = "";
    $.each(locations, function (i) {
        seloption += '<option value="' + locations[i].City + '">' + locations[i].City + '</option>';
    });
    $('#optLocations').append(seloption);


    $('#optLocations').on('change', function () {
        //the key is provided for demonstration purposes only! 
        var embedUrl = 'https://www.google.com/maps/embed/v1/place?key=AIzaSyB-MCwhB8ITpjZQyznpnJtPP0ca-62s-jw&q=' + this.value;
        $('#embedMap').attr('src', embedUrl);

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="optLocations" >
        <option disabled selected> -- select a location -- </option>
</select>
<br/>
<iframe id="embedMap" width="600" src="about:blank" height="450" frameborder="0" style="border:0" allowfullscreen='true'></iframe>

【讨论】：

请解释一下代码。您从哪里获得 Location 值？
@AnhTriet，关注Embed a map页面
意思是如果我们有100个位置，我们必须做Embed map 100次才能得到位置数据？ :(
太棒了！非常感谢！ :D 想了解更多关于Google Map Embed 的人，请查看link。
你的两个例子都适合我，谢谢。你能给我更多的帮助吗？如何通过我自己的颜色（如蓝色或其他我自己定义的颜色（粉红色除外）（即默认突出显示颜色）突出显示选定区域。

【解决方案2】：

目前，您无法通过 Google Map API 实现。更多详情请查看this post。

但是，Vadim Gremyachev 回答中提到了一种解决方法：使用Google Map Embed。

如果您想突出显示国家/地区（而不是州），请使用 Geo Charts 服务。它的文档是here。

【讨论】：