是否可以添加个人地点自动完成谷歌地图api v3？ [英] Is possible add personal places to autocomplete in google maps api v3?

问题描述

我想使用自动完成的谷歌搜索，但我想介绍一些个人地点

这是我用来搜索我的地点的代码，但onclick doesn' t工作：

  $（。pac-container）。append（'< div id =areasearch'+ e +'class =pac-item areasearchstyle =display：noneonclick =clickOneAreaLocalizar（\''+ $（this）.text（）+'\'）>< span class = pac-icon pac-icon-areas>< / span>< span class =pac-item-query>< span class =pac-matched>< / span> $（this）.text（）+'< / span>< span>区域< / span>< / div>'）; 
  

这是结果：

< img src =https://i.stack.imgur.com/sMGN5.pngalt =

这是代码I用于在输入中添加搜索：
$ b $ pre $ var input = / ** @type {HTMLInputElement} * /（document.getElementById（'搜索框'））;

var searchBox = new google.maps.places.Autocomplete（/ ** @type {HTMLInputElement} * /（input），{types：['geocode']}）;

google.maps.event.addListener（searchBox，'place_changed'，function（）{
try {
var places = searchBox.getPlace（）;

if（places.length == 0）{
return;
}

var bounds = new google.maps.LatLngBounds（）;

bounds.extend（places.geometry.location）;

map.fitBounds（bounds）;
} catch（e）{
codeAddress（）;
}

}）;

我为所有人制作了这个例子，更好地理解我想要的东西

jsfiddle

结果qwerty有一个onclick，但不起作用

任何人有任何想法如何做到这一点？

感谢：

解决方案

p>

  $（document）.ready（function（）{
 
 var mapOptions = {
 zoom ：10，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 center：new google.maps.LatLng（41.06000,28.98700）
}; 
 
 var map = new google.maps.Map（document.getElementById（map），mapOptions）; 
 
 var geocoder = new google.maps.Geocoder（）; 
 searchBoxMapAddress = function（）{ 
 
 //创建搜索框并将其链接到UI元素。
 var input = / ** @type {HTMLInputElement} * /（document.getElementById（'searchbox'））; 
 
 var searchBox = new google.maps.places.Autocomplete（/ ** @type {HTMLInputElement} * /（input），{types：['geocode']}）; 
 
 //监听用户从
 //选择列表中选择一个项目时触发的事件检索匹配的地方（）; 
 google.maps.event.addListener（searchBox，'place_changed'，function（）{
 
 var places = searchBox.getPlace（）; 
 
 
 //对于每个地方，获取图标，地点名称和位置。 
 
 var bounds = new google.maps.LatLngBounds（）; 
 
 bounds.extend（places.geometry.location）; 
 
 map.fitBounds（bounds）; 
 
 
}）; 
 
 //将SearchBox结果偏置到位于
 //当前地图视口范围内的地方。 
 google.maps.event.addListener（map，'bounds_changed'，function（）{
 var bounds = map.getBounds（）; 
 searchBox.setBounds（bounds）; 
 }）; 
 
 $ b $ setTimeout（function（）{
 $（。pac-container）。append（'< div id =areasearchclass =pac-item areaselickonclick =alert（\'make onclick\'）>< span class =pac-icon pac-icon-areas>< / span>< span class =pac-item -query>< span class =pac-matched>< / span> qwerty< / span>< span>区域< / span>< / div>'）; 
}， 500）; 
 searchBoxMapAddress（）; 
}）; 
  

jsfiddle

I want to use autocomplete google search but I want to introduce some personal places

This was the code I used to add to search my places but the onclick doesn´t work:

$(".pac-container").append('<div id="areasearch' + e + '" class="pac-item areasearch" style="display:none" onclick="clickOneAreaLocalizar(\'' + $(this).text() + '\')"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>' + $(this).text() + '</span> <span>Area</span></div>');

this is the result:

And this is the code I use to add search in input:

var input = /** @type {HTMLInputElement} */(document.getElementById('searchbox')); 

     var searchBox = new google.maps.places.Autocomplete(/** @type {HTMLInputElement} */(input),  { types: ['geocode'] });

     google.maps.event.addListener(searchBox, 'place_changed', function () {
         try{
                var places = searchBox.getPlace(); 

                if (places.length == 0) {
                    return; 
                } 

                var bounds = new google.maps.LatLngBounds();

                bounds.extend(places.geometry.location); 

                map.fitBounds(bounds);
         }catch(e){
             codeAddress();
         }

     });

I made this example for all understand better what I want

jsfiddle

the result qwerty have one onclick but doesn't work

Anyone have any idea how to do this?

thank's:)

解决方案

I hope this will help

    $(document).ready(function(){

  var mapOptions = {
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       center: new google.maps.LatLng(41.06000,28.98700)
     };

  var map = new google.maps.Map(document.getElementById("map"),mapOptions);

  var geocoder = new google.maps.Geocoder();  
     searchBoxMapAddress = function () {

        // Create the search box and link it to the UI element.
        var input = /** @type {HTMLInputElement} */(document.getElementById('searchbox')); 

         var searchBox = new google.maps.places.Autocomplete(/** @type {HTMLInputElement} */(input),  { types: ['geocode'] });

        // Listen for the event fired when the user selects an item from the
        // pick list. Retrieve the matching places for that item.
         google.maps.event.addListener(searchBox, 'place_changed', function () {

                    var places = searchBox.getPlace(); 


                    // For each place, get the icon, place name, and location.

                    var bounds = new google.maps.LatLngBounds();

                    bounds.extend(places.geometry.location); 

                    map.fitBounds(bounds);


         });

        // Bias the SearchBox results towards places that are within the bounds of the
        // current map's viewport.
        google.maps.event.addListener(map, 'bounds_changed', function () {
            var bounds = map.getBounds();
            searchBox.setBounds(bounds);
        });

    }
    setTimeout(function(){
    $(".pac-container").append('<div id="areasearch" class="pac-item areasearch" onclick="alert(\'make onclick\')"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>qwerty</span> <span>Area</span></div>');
    }, 500);
     searchBoxMapAddress();
     });

jsfiddle

这篇关于是否可以添加个人地点自动完成谷歌地图api v3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！