Question

为从下面编写的代码输入的地址添加标记的最简单方法是什么。代码读取地址并将数据库中最近的三个存储返回到地图上。但是它没有显示用户输入的地址，我希望它以不同的颜色显示。

我很抱歉它是如何从剪贴板粘贴的。

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>Google Maps AJAX + mySQL/PHP Example</title>
        <script src="http://maps.google.com/maps/api/js?sensor=false"
        type="text/javascript"></script>
        <script type="text/javascript">
        //<![CDATA[
        var map;
        var markers = [];
        var infoWindow;
        var locationSelect;
        var geocoder = null;

        function load() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(40, -100),
                zoom: 4,
                mapTypeId: 'roadmap',
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                }
            });
            infoWindow = new google.maps.InfoWindow();
            locationSelect = document.getElementById("locationSelect");
            locationSelect.onchange = function () {
                var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
                if (markerNum != "none") {
                    google.maps.event.trigger(markers[markerNum], 'click');
                }
            };
        }

        function showAddress(addressInput) {
            if (geocoder) {
                geocoder.getLatLng(
                addressInput, function (point) {
                    if (!point) {
                        alert(addressInput + " not found");
                    } else {
                        map.setCenter(point, 15);
                        var marker1 = new GMarker(point, {
                            draggable: true
                        });
                        map.addOverlay(marker1);
                        GEvent.addListener(marker1, "dragend", function () {
                            marker1.openInfoWindowHtml(marker1.getLatLng().toUrlValue(6));
                        });
                        GEvent.addListener(marker1, "click", function () {
                            marker1.openInfoWindowHtml(marker1.getLatLng().toUrlValue(6));
                        });
                        GEvent.trigger(marker1, "click");
                    }
                });
            }
        }

        function searchLocations() {
            var address = document.getElementById("addressInput").value;
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                address: address
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    searchLocationsNear(results[0].geometry.location);
                } else {
                    alert(address + ' not found');
                }
            });
        }

        function clearLocations() {
            infoWindow.close();
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }
            markers.length = 0;
            locationSelect.innerHTML = "";
            var option = document.createElement("option");
            option.value = "none";
            option.innerHTML = "See all results:";
            locationSelect.appendChild(option);
        }

        function searchLocationsNear(center) {
            clearLocations();
            var radius = document.getElementById('radiusSelect').value;
            var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
            downloadUrl(searchUrl, function (data) {
                var xml = parseXml(data);
                var markerNodes = xml.documentElement.getElementsByTagName("marker");
                var bounds = new google.maps.LatLngBounds();
                for (var i = 0; i < markerNodes.length; i++) {
                    var name = markerNodes[i].getAttribute("name");
                    var address = markerNodes[i].getAttribute("address");
                    var distance = parseFloat(markerNodes[i].getAttribute("distance"));
                    var latlng = new google.maps.LatLng(
                    parseFloat(markerNodes[i].getAttribute("lat")), parseFloat(markerNodes[i].getAttribute("lng")));
                    createOption(name, distance, i);
                    createMarker(latlng, name, address);
                    bounds.extend(latlng);
                }
                map.fitBounds(bounds);
                locationSelect.style.visibility = "visible";
                locationSelect.onchange = function () {
                    var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
                    google.maps.event.trigger(markers[markerNum], 'click');
                };
            });
        }

        function createMarker(latlng, name, address) {
            var html = "<b>" + name + "</b> <br/>" + address;
            var marker = new google.maps.Marker({
                map: map,
                position: latlng
            });
            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
            });
            markers.push(marker);
        }

        function createOption(name, distance, num) {
            var option = document.createElement("option");
            option.value = num;
            option.innerHTML = name + "(" + distance.toFixed(1) + ")";
            locationSelect.appendChild(option);
        }

        function downloadUrl(url, callback) {
            var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
            request.onreadystatechange = function () {
                if (request.readyState == 4) {
                    request.onreadystatechange = doNothing;
                    callback(request.responseText, request.status);
                }
            };
            request.open('GET', url, true);
            request.send(null);
        }

        function parseXml(str) {
            if (window.ActiveXObject) {
                var doc = new ActiveXObject('Microsoft.XMLDOM');
                doc.loadXML(str);
                return doc;
            } else if (window.DOMParser) {
                return (new DOMParser).parseFromString(str, 'text/xml');
            }
        }

        function doNothing() {}
        //]]>
        </script>
    </head>

    <body style="margin:0px; padding:0px;" onload="load()">
        <div>Adress:
            <input type="text" id="addressInput" size="10" />Product:
            <input type="text" id="ProductInput" size="10" />
            <select id="radiusSelect">
                <option value="3" selected>3mi</option>
                <option value="5">5mi</option>
                <option value="10">10mi</option>
                <option value="25">25mi</option>
            </select>
            <input type="button" onclick="searchLocations(); showAddress(this.address.value); "
            value="Search" />
            <br>
            <input type="checkbox" name="currentLocation" value="currentLocation"
            />Use Current Location</div>
        <div>
            <select id="locationSelect" style="width:500;visibility:hidden"></select>
        </div>
        <div id="map" style="width: 500; height: 500"></div>
    </body>

</html>

Answer 1

使用Google的geocoding service 将地址字符串转换为（纬度，经度）坐标。将坐标添加到地图上作为标记。如果需要不同的颜色/样式标记，请使用自定义标记图像。我之前已经完成了这项工作，您需要的所有信息都应该在Google Maps Api reference and the official tutorials.

中

Answer 2

在phpsqlsearch_genxml.php文件中创建位置标记，即

$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name", "Location");
$newnode->setAttribute("address", "Location");
$newnode->setAttribute("lat", $center_lat);
$newnode->setAttribute("lng", $center_lng);
$newnode->setAttribute("distance", 0);

然后遍历行，为每个

添加XML节点你的函数createMarker中的

就像

一样

if(address=="Location"){
  var marker = ??,
  }
  else{
  var marker = !!?,
  }

哪里??和!!是你选择的标记

谷歌地图API3，javascript

2 个答案: