如何在Google地图上突出显示下拉选定区域的区域 [英] How to highlite region of dropdown selected area on Google Map

问题描述

如何在谷歌地图上突出显示下拉选区域，但我希望通过jQuery或JavaScript，我的真实需求是这样的下拉列表是自动填充地址，当我在下拉列表中选择区域或城市时，Google Map只是高亮这些区域由我自定义的highlite颜色。

< select> < option> Los angeles< / 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！2立方米！1F0！2f0的！3f0！3平方米！1i1024！2i768！4f13.1！3立方米！1平方米！1s0x80c2c75ddc27da13％3A0xe22fdf6f254608f4！2sLos +洛杉矶％2C + CA％2C + USA！5e0！3平方米！1sen！ 2s！4v1442834158072width =600height =450frameborder =0style =border：0allowfullscreen>< / iframe>

解决方案

示例

var locations = [{City：'New York'，Location：

< ！1m18！1m12！1立方米！1d193578.74109040972！2D-73.97968099999999！3d40.703312749999995！2立方米！1F0！2f0的！3f0！3平方米！1i1024！2i768！4f13.1！3立方米！1平方米！1s0x89c24fa5d33f083b 3％ A0xc80b8f06e177fe62！2sNew + York％2C + Yhdysvallat！5e0！3m2！1sfi！2sfi！4v1442836316382'}，{City：'Los Angeles'，Location：'！1m18！1m12！1m3！1d423284.5905135276！2d-118.41173249999996！3d34。 020498899999986！2立方米！1F0！2f0的！3f0！3平方米！1i1024！2i768！4f13.1！3立方米！1平方米！1s0x80c2c75ddc27da13％3A0xe22fdf6f254608f4！2sLos +洛杉矶％2C + CA％2C + USA！5e0！3平方米！1sen！2S！4v1442834158072' }]; var seloption =; $ .each（locations，function（i）{seloption + ='< option value =''+ locations [i] .Location +'>'+ locations [i] .City +'< / option>' ;}）; $（＃optLocations’）追加（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>< / select>< br />< iframe id =embedMapwidth =600src =about：blankheight =450frameborder = 0style =border：0allowfullscreen ='true'>< / iframe>

$ b

示例2 $ b

使用 Google Maps Embed API

var locations = [{城市：'纽约'}，{城市：'洛杉矶'}，{城市：'莫斯科'}，{城市：'巴黎'}]; var seloption =; $ .each（locations，function（i）{seloption + ='< option value =''+ locations [i] .City +'>'+ locations [i] .City +'< / option>' ;}）; $（＃optLocations’）追加（seloption）。 $（'＃optLocations'）。on（'change'，function（）{//该键仅用于演示目的！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>< / select>< br />< iframe id =embedMapwidth =600src =about：blankheight =450frameborder = 0style =border：0allowfullscreen ='true'>< / iframe>

$ b

How to highlight dropdown selected area region on google map, but I want this through jQuery or javascript, My actuall requirement is like this dropdown is autocomplete address and which area or city when I select on dropdown, Google Map just highlite those area by my custom highlite color.

<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>

解决方案

The following example demonstrates how to display location on user selection:

Example

 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>

Example 2

Using 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>

这篇关于如何在Google地图上突出显示下拉选定区域的区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！