使用带有google maps api v3的addresspiquer在地图中绘制圆圈

Posted 2023-05-07

【中文标题】使用带有google maps api v3的addresspiquer在地图中绘制圆圈

【英文标题】：Draw circle in map using addresspiquer with google maps api v3

【发布时间】：2013-10-19 07:13:02

【问题描述】：

我正在使用地址 piquer 地图：

https://github.com/sgruhier/jquery-addresspicker

这是addrespicker库的代码：

https://github.com/sgruhier/jquery-addresspicker/blob/master/src/jquery.ui.addresspicker.js

这个库使用 google maps api v3，我想在这个地图上画一个圆圈。

地址选择器代码为：

        $(function () 
            var addresspickerMap = $(" '#' ~ form.vars.name  ~ '_address_addressAutocomplete' ").addresspicker(
                map: map,
                regionBias: "es",
                mapOptions: 
                    zoom:  zoom | default(4) ,
                    center: new google.maps.LatLng( form.vars.data.address.lat | default(40.46366700000001) ,  form.vars.data.address.lon | default(-3.7492200000000366)),
                    scrollwheel: false,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                ,
                elements: 
                    map: "#map",
                    lat: " '#' ~ form.vars.name  ~ '_address_lat' ",
                    lng: " '#' ~ form.vars.name  ~ '_address_lon' ",
                    street_number: " '#' ~ form.vars.name  ~ '_address_streetNumber' ",
                    route: " '#' ~ form.vars.name  ~ '_address_street' ",
                    locality: " '#' ~ form.vars.name  ~ '_address_location' ",
                    administrative_area_level_2: " '#' ~ form.vars.name  ~ '_address_region' ",
                    administrative_area_level_1: " '#' ~ form.vars.name  ~ '_address_state' ",
                    country: " '#' ~ form.vars.name  ~ '_address_country' ",
                    postal_code: " '#' ~ form.vars.name  ~ '_address_zipcode' "
                
            );

        var gmarker = addresspickerMap.addresspicker("marker");
        gmarker.setVisible(true);
        addresspickerMap.addresspicker("updatePosition");

);

我证明这段代码可以画圆但不起作用：

        var circle = new google.maps.Circle(
            map: addresspickerMap.gmap,
            radius: 16093,    // 10 miles in metres
            fillColor: '#AA0000'
    );
        circle.bindTo('center', gmarker.getPosition(), 'position');

我该怎么做？

谢谢

【参考方案1】：

应该是这样的：

 var circle = new google.maps.Circle(
        map: map,
        radius: 16093,    // 10 miles in metres
        fillColor: '#AA0000',
        center: gmarker.getPosition()
    );

【讨论】：

谢谢，但我收到此错误：未捕获错误：值对属性无效

该错误消息对我来说毫无意义。如果您直接复制了该错误消息，我会说您的代码中可能有错字（prooperty 而不是property？）。使用所有地图代码一起更新您的问题。

另外，我不知道这行实际上返回的是什么：var gmarker = addresspickerMap.addresspicker("marker"); 我假设一个 Google Marker 对象，它有一个 getPosition 函数。但也许它不是特定于地址选择器插件的东西。无论如何，要使圆工作，您需要在 circleOptions 中指定地图和中心坐标